Question

在Vue中可以这样绘制一个简单的数组：

<ul>
    <li v-for="item in ['Item 1', 'Item 2', 'Item 3']"
        v-text="item" />
</ul>

是否有一种简单的方法可以使用如下所示的“链接列表”来达到相同的结果，而不必嵌套元素或影响性能（例如，通过将列表转换为数组）？

{
    title: 'Item 1',
    next: {
        title: 'Item 2',
        next: {
            title: 'Item 3',
            next: null
        }
    }
}

Answer 1

已编辑

通过使用Object.keys()和Object.values()迭代到对象中以创建要显示的新数组，将数据转换为可迭代的（对于这种情况，在数组中）。

Answer 2

按照@destoryer的建议，您可以创建一个computed属性，该属性将调用另一个函数将链接列表转换为数组。

computed: {
  lists() {
    // assuming that linkedLists is in your data property

    // declared under `methods` in this example
    return this.flattenLists(this.linkedLists); 
  }
},
methods: {
  flattenLists({ title, next }) {
    return next ? [title].concat(this.flattenLists(next)) : [title];
  }
}

flattenLists是一个递归函数，如果next是一个对象，它将以next作为参数调用自身并将结果连接到当前数组。

在此示例中，它位于methods下，但最好将其放在   作为助手/工具，尤其是如果您想重用它   在其他组件中。

然后您可以像这样在v-for中使用它。

<ul v-for="(item, index) in lists" :key="index">
  <li>{{ item }}</li>
</ul>

在Vue中处理链接列表

2 个答案: