Vue3 官方的文档说明:
reactive() 返回一个对象的响应式代理
所以 reactive 方法应该作用于一个对象Object,如果要使用数组,则需要包装一下:
let list = reactive({
data: [{id: 01, name: 'XXX'}]
})
或者使用 ref:
let list = ref([{id: 1, name: 'Andy'}])
已下引用原作者的代码:
import { reactive, ref } from 'vue'
export default {
setup() {
let list = reactive([{id: 1, name: 'Andy'}])
const checkBtn = () => {
list = [{id: 1, name: 'Andy'}]
list.push({id: 2, name: 'Lucy'})
}
let list = reactive({
data: [{id: 1, name: 'Andy'}]
});
const checkBtn = () => {
list.data = [{id: 1, name: 'Andy'}]
list.data.push({id: 2, name: 'Lucy'})
}
let list = ref([{id: 1, name: 'Andy'}]);
const checkBtn = () => {
list.value = [{id: 1, name: 'Andy'}]
list.value.push({id: 2, name: 'Lucy'})
}
return {
list,
checkBtn
}
},
}
————————————————
版权声明:本文为CSDN博主「普通网友」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Ajekseg/article/details/123375893
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)