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

Question

I have a v-for loop in Vue.js. It has to iterate through a list to create buttons. I added a click event on them, so upUrl changes and takes their button index for its value:

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

I have upUrl:null in data() but checking in the Vue Google Chrome Console, I can see that upUrl is never updated, and always equal null .

I've tried using @click="upUrl= this.index"> but I get an error: ' index' is defined but never used .

Answer 1

It should work, check the following example:

 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>