vue3 中reative 值为数组时如何重新赋值
采用这种方式const tableData = reactive([]);定义的时候,不能直接赋值,这样的话就不能响应。需要利用push的方式。这中定义的可以直接赋值即可。
·
<template >
<div>
<h1>test11111111</h1>
<h3 v-for="(name,index) in tableData" :key="index">{{ name }}</h3>
<button @click="test">test</button>
<button @click="test2">test2</button>
<br/>
<h3 v-for="(name,index) in tableDataObj.listobj" :key="index">{{ name }}</h3>
<button @click="test3">test3</button>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const tableData = reactive([]);
//const tableData = reactive<any>([]);
const tableDataObj = reactive({listobj:[]});
function test()
{
tableData.push({"name":"test1"}); //方式可以
}
function test2()
{
tableData.length = 0; //重置
let list = [{name:"test2"}];
//tableData = list; //方式不行
tableData.push(...list); //方式可以
}
function test3()
{
let list = [{name:"test3"}];
tableDataObj.listobj = list;
tableDataObj.listobj.push({name:"test4"});;
}
</script>
采用这种方式const tableData = reactive([]);定义的时候,不能直接赋值,这样的话就不能响应。需要利用push的方式。
const tableDataObj = reactive({listobj:[]}); 这中定义的可以直接赋值即可
参考
更多推荐
已为社区贡献1条内容
所有评论(0)