javascript - 如何解决vuejs不能把后面增加、改动的元素渲染出来

查看:95
本文介绍了javascript - 如何解决vuejs不能把后面增加、改动的元素渲染出来的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

https://jsfiddle.net/5uvo11w3/

我点addOne后仍旧还是展示原来的

<div id="container">
<h1 v-for="(item, key) in items" >
  {{ key }}
</h1>

<div type="buttom" v-on:click="addOne">addOne</div>
<div type="buttom" v-on:click="consoleLog">consoleLog</div>

</div>


<script>
new Vue({
  el: '#container',
  data: {
    items: {
       "tube1":[
           {"msg": "hello"},
           {"msg": "world"},
       ],
       "tube2":[
           {"msg": "hello2"},
           {"msg": "world2"},
       ],
       "tube3":[
           {"msg": "hello3"},
           {"msg": "world3"},
       ]
    }
  },
  methods:{
       addOne: function(){
               this.items["tube4"] = [
           {"msg": "hello4"},
           {"msg": "world4"},
               ];
       },
       consoleLog: function(){
               console.log(this.items)
       }
  }
})
</script>

解决方案

这样写vue是检测不到变化的,可以通过vue.set设置。

把addOne方法改写为这样

 addOne: function(){
          var arr = [
               {"msg": "hello4"},
               {"msg": "world4"},
             ];
             this.$set(this.items,"tube4",arr);
       }
       

原理参考深入响应式原理

这篇关于javascript - 如何解决vuejs不能把后面增加、改动的元素渲染出来的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆