javascript - vue变量更新无法触发dom更新
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-12 09:29:44
0
10
1012

如下所示,我在html用v-for渲染这个itemList,通过每个item的active控制是否显示(v-show)这个item对应的html。
但是,像这样通过事件方法selectItem,改变了itemList,dom却不更新???

var vue = new Vue({ el: '#app', data: { itemList:{ '1':{'text':'abc', 'active':false}, '2':{'text':'abc', 'active':true} }, }, methods: { selectItem: function (index) { vue.itemList[index].active = true; }, }, });
女神的闺蜜爱上我
女神的闺蜜爱上我

全部回复 (10)
仅有的幸福

雷雷

    phpcn_u1582

    vue.itemList[index].active = true; vue改成this

      滿天的星座

      selectItem里console.log(index)有值吗,应该是用this来获取这个vue对象

        曾经蜡笔没有小新

        修改数据方法都不对,不报错吗?

        var vue = new Vue({ el: '#app', data: { itemList:[ {'text':'abc', 'active':false}, {'text':'abc', 'active':true} ] }, methods: { selectItem: function (index) { this.itemList[index].active = true; } }, });
          某草草

          按照你提供的数据格式,我试了一下,是可以的,代码如下
          `


        • {{item.text}}



        • `

            扔个三星炸死你

            在vue内部 不是通过vue来点 即使你用了一个变量来保存 vue的实例 通过 this

            vue.itemList[index].active = true; 换成 this.itemList[index].active = true;
              阿神

              你html里面怎么写的,虽然你这js代码写的不够优雅,比如这里使用数组比对象更合适,但是也没错,我觉得你dom没有渲染不是这里的问题,应该是绑定表单控制,如select 数据单向流的问题。

                巴扎黑

                键值的模式不能被vue监听到,vue提供了$set的方法。。删除也需要
                selectItem: function (index) {

                var newA = this.itemList[index]; newA.active = true this.$set(this.itemList,index,newA)

                },

                  習慣沉默

                  把Vue改为this试下

                    typecho

                    this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))

                      最新下载
                      更多>
                      网站特效
                      网站源码
                      网站素材
                      前端模板
                      关于我们 免责声明 Sitemap
                      PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!