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。搞定了，收场