问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue.js如何给动态循环的元素绑定事件？

头像
huanglvming
    174143141
    <template>
    <div>
        <div class="static" @click="handleClick(5)">我是静态元素</div>
        <div class="dynamic">
            <div class="dynamic-item" v-for="(item,index) in list" :key="index" @click="handleClick(index)">我的是动态元素--{{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>

    如上代码， 点击静态元素时，可以在vue开发插件中观察到数据的变化，但是当点击动态元素时，却无论如何都无法触发数据的变化（虽然console.log的值已经改变）,视图也没有发生改变 。
    请给位大神帮忙解决，紧急。
    谢谢。

    vue.js
    阅读 18k
    3 个回答
    得票最新
    头像
    Reachel
      2.6k1114
      ✓ 已被采纳

      代码没问题的，我这边也重现不了。仔细查找下其他原因，或者不用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)">我是静态元素</div>
        <div class="dynamic">
            <div class="dynamic-item" v-for="(item,index) in list" :key="index" @click="handleClick(index)">我的是动态元素--{{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>
      头像
      luozz
        5.8k3629

        这样试试：

         handleClick(i){
    this.set(this.list,i,true); //这里直接使用set试试
    console.log(this.list);
}
        头像
        wlove
          6.9k3835

          this.$set(this.list,i,true) 是这么写

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题