如何从vue中的span html中获取值？

Question

大家好，我有一个问题，我的 html 文件中有 Span 链接，我需要创建一个过滤器，当我单击一个 Span 时，该 Span 会在我的 vue 文件中发送一个值，并且该值会打开一个过滤器。我该怎么做？实际上我从本地数组中获取用于填充跨度值的信息<a class="badge badge-pill badge-white-soft  mr-1 mb-1"href="#"            data-toggle="pill"            data-target="#portfolio"            v-for="country in countries" v-bind:key="country " v-onclick="getvalue"          >            <span class="h6 text-uppercase">{{ country}}</span>          </a>   data(){ countries:["Africa","America","Asia","Europe"]}

Answer 1

您只需country在单击a标签时发送值即可。

<a class="badge badge-pill 

     badge-white-soft  mr-1 mb-1"href="#" data-toggle="pill"

     data-target="#portfolio"

     v-for="country in countries" v-bind:key="country " 

     @click="getvalue(country)">

            <span class="h6 text-uppercase">{{ country}}</span>

</a>

在方法内部，您将能够对其进行控制台

getValue(country){

  console.log(country)

}

您还可以span通过从a标签中删除它来使用 for click 并

<span class="h6 text-uppercase" @click="getvalue(country)">{{ country}}

Answer 2

为什么不将国家/地区值传递给函数呢？这将是干净的方式。

<a class="badge badge-pill badge-white-soft  mr-1 mb-1"

   href="#"

   data-toggle="pill"

   data-target="#portfolio"

   v-for="country in countries" v-bind:key="country " v-on:click="getvalue(country)"

   >

   <span class="h6 text-uppercase">{{ country}}</span>

</a>  

...

methods: {

  ...

  getValue(v){

    console.log(v)

  }

}

Answer 3

首先，你的语法有错误，它v-on:click不应该是v-onclick。另外，如果仍然不起作用，v-on:click.capture则可能需要捕获修饰符，因为您正在尝试对 div 的内部元素进行操作。

至于跨度的动态值，您最有可能希望使用v-model.