vue,往已经存在的数组里追加数据，结果不随着数据变化而变化，如下图和代码

Question

想要的效果 点击按钮，使textarea,的resize属性，在none和vertical之间动态切换 在已有的数组里追加数据，不行 <template> <div> <helloTest></helloTest> <ul> <li v-for="item in data" :key="item.id"> {{item.id}}--{{item.name}}--{{item.show}} <button @click="aa(item)">aa</button> <textarea :class="{actived:item.show}"></textarea> </li> </ul> </div> </template> <script> import helloTest from "@/components/helloTest"; export default { components: { helloTest }, data() { return { data: [ // { id: 1, name: "jie1",show:false }, // { id: 2, name: "jie2" ,show:false }, // { id: 3, name: "jie3",show:false } { id: 1, name: "jie1" }, { id: 2, name: "jie2"}, { id: 3, name: "jie3"} ] }; }, methods: { aa(item) { console.log(item); item.show = !item.show; console.log(item); }, dataArrar(){ this.data.forEach(item => { item.show = false; }); } }, created() { // this.dataArrar() }, mounted() { this.dataArrar() } }; </script> <style> textarea.actived { resize: none; } </style> 如果原来data里有show这个属性，就可以，但是后台传过来的数据没有show这个属性 <template> <div> <ul> <li v-for="item in data" :key="item.id"> {{item.id}}--{{item.name}}--{{item.show}} <button @click="aa(item)">aa</button> <textarea :class="{actived:item.show}"></textarea> </li> </ul> </div> </template> <script> export default { data() { return { data: [ { id: 1, name: "jie1",show:false }, { id: 2, name: "jie2" ,show:false }, { id: 3, name: "jie3",show:false } // { id: 1, name: "jie1" }, // { id: 2, name: "jie2" }, // { id: 3, name: "jie3" } ] }; }, methods: { aa(item) { console.log(item); item.show = !item.show; console.log(item); }, dataArrar() { this.data.forEach(item => { item.show = false; }); } }, created() { // this.dataArrar() }, mounted() { this.dataArrar(); } }; </script> <style> textarea.actived { resize: none; } </style> 重新上传

Answer 1

我猜这不是你写的0 - 0获取数据后做个处理，循环一下，依次添加属性show。搞定了，收场