vue3 中reative 值为数组时如何重新赋值
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
<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:[]}); 这中定义的可以直接赋值即可
参考
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)