Vue组件v-for循环内@click事件无法更新data属性的问题求助

在Vue组件的v-for循环中触发点击事件后，data属性无法自动更新。组件代码如下：

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

                    <img class="plus mr-2" src="/images/icons/plus.svg" />
                    <p @click="setChosen(country.id)" class="select-text">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>

预期点击SELECT按钮时，data中的chosenId会随之更新，但实际上该属性只有在更新DOM或强制Vue响应时才会变化，不过能正常在控制台打印传入的id。请问哪里操作有误？

这大概率是事件冒泡导致的问题：

• 你的<p>标签嵌套在<li class="is-clickable">里面，点击SELECT时，事件会冒泡到<li>元素。如果is-clickable类绑定了其他点击事件（比如折叠/展开、清空选择之类的逻辑），就会干扰setChosen的执行，甚至覆盖掉chosenId的更新。

可以按以下步骤排查修复：

1. 阻止事件冒泡
   在@click事件中添加.stop修饰符，阻止点击SELECT的事件向上冒泡到父元素：

   <p @click.stop="setChosen(country.id)" class="select-text">SELECT</p>
   

2. 检查父元素的点击逻辑
   确认<li class="is-clickable">是否绑定了其他点击事件（比如@click指令），如果有，要确保它的逻辑不会重置chosenId或者和setChosen产生冲突。

3. 验证响应式更新
   如果以上操作后还是有问题，可以在setChosen方法里手动触发Vue的响应式更新（仅作为兜底方案，Vue2一般不需要）：

   setChosen(id){
     this.chosenId = id;
     // 强制更新（兜底方案）
     this.$forceUpdate();
   }
   

另外，建议在模板里临时添加{{ chosenId }}来实时观察这个值的变化，方便调试。

内容的提问来源于stack exchange，提问作者Mariann