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

Posted 2023-02-23

【中文标题】@click 事件不会更改 Vue.js 中的数据属性

【英文标题】：@click event not changing data property in Vue.js

【发布时间】：2020-12-06 20:34:42

【问题描述】：

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

【参考方案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>

【讨论】：

我的错误是我在data() 中的upUrl 之前定义了buttonPics[ ]。我不知道订单很重要。

现在如果我取消 upUrl ，它在我的 Vue Google Chrome 控制台中不会改变。它的值是否会改变？

顺序无所谓，请分享如何登录控制台

我没有登录到控制台，我只是在看 Vue Google Chrome 控制台扩展。

数据正在发生变化，您可以通过观察它来证明这一点，就像我在编辑的答案中所做的那样