vue,往已經(jīng)存在的數(shù)組里追加數(shù)據(jù)，結果不隨著數(shù)據(jù)變化而變化，如下圖和代碼

想要的效果

點擊按鈕，使textarea,的resize屬性，在none和vertical之間動態(tài)切換

在已有的數(shù)組里追加數(shù)據(jù)，不行

<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這個屬性，就可以，但是后臺傳過來的數(shù)據(jù)沒有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>

重新上傳