84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
以下に示すように、v-for を使用してこの itemList を html でレンダリングし、各アイテムの active を通じてこのアイテムに対応する html を表示 (v-show) するかどうかを制御します。 しかし、このようにイベントメソッドselectItemでitemListを変更した場合、domは更新されないのでしょうか? ? ?
// 你的数据itemList结构改改 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; }, }, });
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; } }, });
按照你提供的数据格式,我试了一下,是可以的,代码如下`<p id="app"><li v-for="(item,index) in itemList" v-on:click="selectItem(index)" v-if="item.active">
{{item.text}}
</li></p><script>
var vue = new Vue({ el: '#app', data: { itemList:{ '1':{'text':'abc1', 'active':true}, '2':{'text':'abc2', 'active':true} }, }, methods: { selectItem: function (index) { console.log(vue.itemList[index].active); vue.itemList[index].active = false; }, }, });
</script>`
在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试下
this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))
vue.itemList[index].active = true; vue改成this
selectItem里console.log(index)有值吗,应该是用this来获取这个vue对象
修改数据方法都不对,不报错吗?
按照你提供的数据格式,我试了一下,是可以的,代码如下
`<p id="app">
<li v-for="(item,index) in itemList" v-on:click="selectItem(index)" v-if="item.active">
</li>
</p>
<script>
</script>`
在vue内部 不是通过vue来点 即使你用了一个变量来保存 vue的实例 通过 this
你html里面怎么写的,虽然你这js代码写的不够优雅,比如这里使用数组比对象更合适,但是也没错,我觉得你dom没有渲染不是这里的问题,应该是绑定表单控制,如select 数据单向流的问题。
键值的模式不能被vue监听到,vue提供了$set的方法。。删除也需要
selectItem: function (index) {
},
把Vue改为this试下
this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))