vue 怎么样不重复往数组里插入数据_vue,往已经存在的数组里追加数据，结果不随着数据变化而变化，如下图和代码...

想要的效果

点击按钮，使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>

重新上传