求助 , 如何在vue3.2中, 使用v-for循环reactive(对象数组)中的数组?

我使用了TS 和setup语法糖, 想在模板中使用v-for来循环一个响应式对象数组, 失败了!!! 我贴一段我失败的伪代码, 希望懂得朋友, 能给指点一下!!

<template>
    <!-- v-for 循环 对象数组 -->
  <div v-for="(animal, index) in animalList" :key="index">
    <section>{{ animal}}</section>
  </div>
</template>

<script setup lang="ts">
    // animal是我随手定义的类, 从外部引入的
    let animalList: Animal[] = []

    function getList(){
        返回由Animal对象构成的数组
    }

    // 在生命周期函数中调用getList方法, 获取Animal数组 并赋值给外部的animalList
    onBeforeMount(() => {
      let list: Article[] = getList()
        // 使用reactive函数, 使list变成响应式变量, 再赋值给animalList
      animalList= reactive(list)
    })
</script>
vuejs
226 views
Comments
登录后评论
Sign In
·

对 Vue 不太熟，提个疑问。

animalList 不是应该放在 data () 里用键值对的形式提供吗？你定义 animalList 变量，模板里是获取不到的吧 flushed

·

我想是因为你animalList一开始不是响应式的吧，这里用ref感觉会好一点

·
<script setup>
import { reactive } from 'vue'

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})
</script>

<template>
	<ul>
    <li v-for="(value, key, index) in myObject">
		  {{ index }}. {{ key }}: {{ value }}
		</li>
  </ul>
</template>

官网不是有说明吗？

vue需要先声明啦