Data property wont update @click event in v-for-CodePudding

I have an issue with the data property not updating after a click event in a v-for loop. The vue component looks like this:

<template>
<div v-if="showResults && placeholder === 'Country'" >
            <ul>
                <li  v-for="country in countries" :key="country.id" >{{country.name}}
                    <span >

                    <img  src="/images/icons/plus.svg" />
                    <p @click="setChosen(country.id)" >SELECT</p>
                  </span>
                </li>
            </ul>
        </div>
</template>

<script>
export default {
    name: "Searchbar",
    props: {
        placeholder: String,
    },
    data() {
        return {
            countries: null,
            showResults: false,
            chosenId:null,
            chosenName: null,
            searchInput:null,
        };
    },
    methods: {
        getCountries() {
            axios
                .get("/api/getCountries")
                .then((response) => {
                    this.countries = response.data.data;
                })
                .catch((error) => {
                    console.log("error");
                    console.log(error);
                });
        },
        setChosen(id){
          this.chosenId = id;
        }
    },
    mounted() {
        this.getCountries();
    },
};
</script>

I am expecting the chosenId to update on click but it doesn't actually update unless I update the dom, or force a reaction from vue. What am I doing wrong? I can console log the id perfectly fine.

CodePudding user response：

Your code should work fine, I did not see any issue. Here is the working demo. You can have a look and try to find the root cause by referencing this demo.

new Vue({
  el: '#app',
  data: {
    countries: [{
        id: 1,
      name: 'United State'
    }, {
        id: 2,
      name: 'Australia'
    }, {
        id: 3,
      name: 'Canada'
    }],
    chosenId: null
  },
  methods: {
    setChosen(id) {
        this.chosenId = id;
      console.log(this.chosenId);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="country in countries" :key="country.id" >
      {{country.name}}
      <span>
        <p @click="setChosen(country.id)">SELECT</p>
      </span>
    </li>
  </ul>
</div>

CodePudding user response：

Have you checked the console for some errors/warning from js/vue?

There are some problems in your code. You have a wrong closing tag in your template <template/>.

And the showResults property will be always false in your code. So, I don't see any way of showing your country select list at all.

Otherwise, if you correct the mentioned above, there is no problems. It's working well.

Here is the playground:

https://stackblitz.com/edit/vue-vdcfgp?file=src/components/Searchbar.vue

Try to debug-display the chosenId in your component with {{chosenId}}