V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Richard14
V2EX  ›  问与答

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

  •  
  •   Richard14 · 2023-02-15 18:42:01 +08:00 · 713 次点击
    这是一个创建于 672 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    4 条回复    2023-02-15 19:38:37 +08:00
    noe132
        1
    noe132  
       2023-02-15 18:47:42 +08:00
    你设置的是 items 的 value 属性
    而不是往 items 里 push 值。
    就好比
    const arr = []
    arr.value = blablabla
    arr.length // 0
    joe237
        2
    joe237  
       2023-02-15 19:08:56 +08:00
    呃,你这是 reactive 和 ref 分不清楚呀
    Track13
        3
    Track13  
       2023-02-15 19:23:52 +08:00 via Android
    要不你去看看文档?reactive 有.value?如果不是记错了,建议重学 js 。
    Richard14
        4
    Richard14  
    OP
       2023-02-15 19:38:37 +08:00
    @noe132 @joe237 谢谢,解决了


    @Track13 重学倒不至于吧,因为根本也没学过,所以没有网友们攻击性强
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1867 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:19 · PVG 00:19 · LAX 08:19 · JFK 11:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.