如何从 vue 中的跨度 html 中获取值？

Question

Hello gangs I have a bit problem I have span links in my html file and I need create a filter that when I click in a span this span send a value in my vue file and this value turn on a filter.How I can do this?

Actually I take information for fill the span value from a local array

<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

First things first, you have an error in your syntax, it should be v-on:click not v-onclick . Also if that continues to not work, the capture modifier, v-on:click.capture , may be necessary since you're trying to operate on a inner element of the div.

As for dynamic values for your span, you most likely want to use v-model . For more information on binding data to your components, refer to the components documentation here. Also, refer to this link for additional information regarding event handling.

Answer 2

Why don't you just pass the country value to the function? That will be the clean way.

<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

You just need to send the country value on clicking the a tag.

<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>

Inside the method, you will able to console it

getValue(country){
  console.log(country)
}

You can also use the span for click by removing it from a tag and

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