鍍金池/ 問答/HTML/ vue.js如何給動態(tài)循環(huán)的元素綁定事件?

vue.js如何給動態(tài)循環(huán)的元素綁定事件?

<template>
    <div>
        <div class="static" @click="handleClick(5)">我是靜態(tài)元素</div>
        <div class="dynamic">
            <div class="dynamic-item" v-for="(item,index) in list" :key="index" @click="handleClick(index)">我的是動態(tài)元素--{{item}}</div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                list: [],
            }
        },
        methods:{
            getData(){
                axios.get(someapi).then(res =>{
                    this.list = res.data;
                })
            },
            handleClick(i){
                this.$set(this.list,i,true);
                console.log(this.list);
            }
        },
        created(){
            this.getData();
        }
    }
</script>

如上代碼, 點擊靜態(tài)元素時,可以在vue開發(fā)插件中觀察到數(shù)據(jù)的變化,但是當(dāng)點擊動態(tài)元素時,卻無論如何都無法觸發(fā)數(shù)據(jù)的變化(雖然console.log的值已經(jīng)改變),視圖也沒有發(fā)生改變 。
請給位大神幫忙解決,緊急。
謝謝。

回答
編輯回答
我以為

this.$set(this.list,i,true) 是這么寫

2018年1月7日 19:36
編輯回答
笑浮塵

代碼沒問題的,我這邊也重現(xiàn)不了。仔細(xì)查找下其他原因,或者不用set試試

var temp = this.list
temp[i] = true
this.list = temp
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>test</title>  
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  
</head>  
<body>  
    <div id="app">
        <div class="static" @click="handleClick(5)">我是靜態(tài)元素</div>
        <div class="dynamic">
            <div class="dynamic-item" v-for="(item,index) in list" :key="index" @click="handleClick(index)">我的是動態(tài)元素--{{item}}</div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data(){
            return{
                list: [false,false,false,false,false,false],
            }
        },
        methods:{
            handleClick(i){
                this.$set(this.list,i,true);
                console.log(this.list);
            }
        },
    })
</script>
</body>  
</html>  
2017年10月13日 21:25
編輯回答
陪她鬧

這樣試試:

 handleClick(i){
    this.set(this.list,i,true); //這里直接使用set試試
    console.log(this.list);
}
2017年5月15日 23:12