Javascript @单击Vue.js中的事件不更改数据属性

我在Vue.js中有一个

v-for

循环。它必须遍历列表才能创建按钮。我在它们上添加了一个单击事件，因此

upUrl

会更改并将它们的按钮索引作为其值：

    <div class="mt-3" v-for="(buttonPic, index) in buttonPics"
                      :key="buttonPic"           
    >
    <button class="btn btn-sm btn-success"
    @click="upUrl= index">
   {{ buttonPic }} </button>
    </div>

{{buttonPic}}

我在

data（）

中有

upUrl:null

，但在Vue Google Chrome控制台中，我可以看到

upUrl

从未更新，并且始终等于

null

---

我尝试过使用

@click=“upUrl=this.index”>

但我得到一个错误：“

索引”已定义但从未使用过它应该可以工作，请检查以下示例：


Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:“#应用程序”，
数据（）{
返回{
upUrl:null，
按钮图标：[“pic1”、“pic2”、“pic3”]
}
},
观察：{
upUrl（新值、旧值）{
console.log（newVal、oldVal）
}
}
})

{{buttonPic}}
我的错误是我在
数据（）中
的
upUrl
之前定义了
buttonPics[]
。我不知道顺序很重要。现在如果我去掉{{upUrl}，它在我的Vue Google Chrome控制台中不会改变。它的值会改变吗？顺序不重要，请分享如何在控制台中登录我没有登录控制台，我刚才在看Vue Google Chrome控制台扩展。数据正在变化，你可以像我在编辑的答案中那样通过观看来证明这一点