@click 事件不会更改 Vue.js 中的数据属性

Question

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

我在data() 中有upUrl:null，但查看 Vue Google Chrome 控制台，我可以看到 upUrl 从未更新，并且始终等于 null。

我尝试过使用@click="upUrl= this.index">，但出现错误：'index' is defined but never used。

Answer 1

它应该可以工作，检查以下示例：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      upUrl: null,
      buttonPics: ["pic1", "pic2", "pic3"]

    }
  },
  watch: {
    upUrl(newVal, oldVal) {
      console.log(newVal, oldVal)
    }
  }

})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

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


</div>