求助 Vue3 用 reactive 绑定数组后 v-for 不渲染 dom

[Richard14]

应该是一个低级问题，自己看了半天没看出来哪里不对，求助一下万能的 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 还是啥也没有，咋回事儿呢？

[noe132]

你设置的是 items 的 value 属性
而不是往 items 里 push 值。
就好比
const arr = []
arr.value = blablabla
arr.length // 0

[joe237]

呃，你这是 reactive 和 ref 分不清楚呀

[Track13]

要不你去看看文档?reactive 有.value?如果不是记错了，建议重学 js 。

[Richard14]

@noe132 @joe237 谢谢，解决了


@Track13 重学倒不至于吧，因为根本也没学过，所以没有网友们攻击性强