应该是一个低级问题,自己看了半天没看出来哪里不对,求助一下万能的 v 友。
希望实现的效果:自定义了一个<Card />组件,后端返回一个[]数组,希望 v-for 按照数组内容渲染 card 组件。
目前 Card 组件正常引入,比如<Card />
这句 dom 是正常渲染的,但是如果用 v-for 绑定数据后则不渲染任何东西,出错代码如下:
<template>
//...
<Card v-for="(item, index) in items"></Card>
//...
</template>
// script 部分代码是先引入 reactive ,初始化一个空数组,然后 axios 获取到的后端数据加入数组的 value
import {onMounted, reactive} from 'vue'
const items = reactive([])
onMounted(() => {
axios({
// 请求部分都是正常的,通过.then(console.log(res))能正常显示数据
})
.then(res => {
if (res["data"]["success"]===true) {
items.value = res["data"]["array"]
}
})
})
理论上按照我的想法,items.value = res["data"]["array"]
这句之后应该 dom 就会渲染了,我通过 log 查看这个 value 也确实是正常的返回值而不是空值,但是实际上 dom 还是啥也没有,咋回事儿呢?
1
noe132 2023-02-15 18:47:42 +08:00
你设置的是 items 的 value 属性
而不是往 items 里 push 值。 就好比 const arr = [] arr.value = blablabla arr.length // 0 |
2
joe237 2023-02-15 19:08:56 +08:00
呃,你这是 reactive 和 ref 分不清楚呀
|
3
Track13 2023-02-15 19:23:52 +08:00 via Android
要不你去看看文档?reactive 有.value?如果不是记错了,建议重学 js 。
|