如何从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&nbsp;&nbsp; &nbsp; &nbsp;badge-white-soft&nbsp; mr-1 mb-1"href="#" data-toggle="pill"&nbsp; &nbsp; &nbsp;data-target="#portfolio"&nbsp; &nbsp; &nbsp;v-for="country in countries" v-bind:key="country "&nbsp;&nbsp; &nbsp; &nbsp;@click="getvalue(country)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="h6 text-uppercase">{{ country}}</span></a>在方法内部，您将能够对其进行控制台getValue(country){&nbsp; 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&nbsp; mr-1 mb-1"&nbsp; &nbsp;href="#"&nbsp; &nbsp;data-toggle="pill"&nbsp; &nbsp;data-target="#portfolio"&nbsp; &nbsp;v-for="country in countries" v-bind:key="country " v-on:click="getvalue(country)"&nbsp; &nbsp;>&nbsp; &nbsp;<span class="h6 text-uppercase">{{ country}}</span></a>&nbsp;&nbsp;...methods: {&nbsp; ...&nbsp; getValue(v){&nbsp; &nbsp; console.log(v)&nbsp; }}

Answer 3

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