js怎样遍历数组里的对象的值？渲染到页面？

Question

我想取出这个数组里的对象的值，使用li列表，把数据渲染到页面。
我用的方法是：

但是无法显示出来

数据：

"topics": [
    {
        "id": 6,
        "creatorId": 4,
        "categories": [
            "11"
        ],
        "description": "1+1=2",
        "createTime": "2020-02-23 20:27:09",
        "personal": false,
        "type": "SINGLE_CHOICE",
        "question": "1+1=？|||2|||11|||100|||5",
        "answer": "0",
        "prompt": "22222",
        "analysis": "11111111",
        "score": 2,
        "time": 2,
        "exams": null,
        "status": "NORMAL"
    }

Answer 1

写法是对的。结果是数据重复赋值被覆盖了。所以出错了

Answer 2

看数据，应该是 v-for="item in topics" 才对啊，不过

关键是 :key 最好不要用 index，因为它需要在列表变化时唯一定位到列表元素，显然 index 是随列表动态变化的。从数据来看，id 应该可以唯一定位到元素对象，所以

<li v=for="item in topics" :key="id">
  <!-- ......... -->
</li>

Answer 3

贴出来的这部分代码没有问题，有没有在 data 里初始化呢？不初始化的话，就不会是响应式的

ruleform: {
  singleChoiceData: []
}

Answer 4

1. 缺少关键代码，无法判断问题在哪里
2. Vue 的响应式基于 “使用 Object.defineProperty() 生成 getter/setter 替换原始对象的属性”，所以参与响应式的属性必须事先声明，并在实例化时替换掉。
3. 你的问题里缺少这些信息
4. 建议了解一下 Vue 的实现原理