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

Question

你好帮派我有一点问题我的 html 文件中有跨度链接，我需要创建一个过滤器，当我单击跨度时，这个跨度会在我的 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中删除它来使用 for click和a

<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. 有关将数据绑定到组件的更多信息，请参阅此处的组件文档。此外，有关事件处理的更多信息，请参阅此链接。