vue处理循环列表动态数据问题
程序员文章站
2023-11-13 18:39:34
调用方法：Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值 ......
调用方法：vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
1 <!doctype html>
2 <html>
3 <head lang="en">
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <div id="app">
10 <p v-for="(item,index)in list" :key="item.id" @click="btnclick(index,item.id)">
11 {{item.message}}
12 </p>
15 </div>
16
17 <script src="../../dist/vue.min.js"></script>
18 <script>
19 var vm2=new vue({
20 el:"#app",
21 data:{
22 list:[
23 {message:"星星",id:"1"},
24 {message:"太阳",id:"2"},
25 {message:"月亮",id:"3"}
26 ]
27 },
28 methods:{
29 btnclick(index,id){
30 this.$set(this.list,index,{message:"小猫",id:id});
31 }
32 }
33 });
34 </script>
35 </body>
36 </html>