【vue3】setup中数组数据变化页面不渲染
关于【vue3】setup中数组数据变化页面不渲染的问题解决方法
·
前言
此时用到的版本是vue: 3.2.13
,目前已修复此问题。——2023.3.24 修改
【错误示范】
<template>
<div>
<button @click="changeArr">删除数组第一个元素</button>
<div v-for="item in arr"></div>
</div>
</template>
<script setup>
import {reactive} from 'vue;
let arr=reactive([{name:'123',value:'123'},{name:'456',value:'456'}]);
let changeArr=()=>{
arr.splice(0,1)
}
</script>
点击按钮后,数组发生了变化,但是页面不渲染。这是因为不能直接对reactive数组操作
【正确示范】
<template>
<div>
<button @click="changeArr">删除数组第一个元素</button>
<div v-for="item in arr.list"></div>
</div>
</template>
<script setup>
import {reactive} from 'vue;
let arr=reactive({
name:'列表',
list:[{name:'123',value:'123'},{name:'456',value:'456'}]
});
let changeArr=()=>{
arr.list.splice(0,1);
}
</script>
点击按钮后,数组发生变化,页面重新渲染。
更多推荐
已为社区贡献1条内容
所有评论(0)