Vue JS如何在v-for循环中使用大括号变量渲染

Question

在我的数据对象中

items: [
        { name: "Breakfast", comp: "breakfastItems" },
        { name: "Lunch", comp: "lunchItems" },
        { name: "Dinner", comp: "dinnerItems" },
        { name: "Dessert", comp: "desertItems" }
      ]

其中 comp 是计算的属性。 在我的组件模板中，我想使用for循环实现类似的功能。

<span v-for="n in items">
{{n.comp}}
</span>

这不起作用，因为我需要在渲染时添加{{}}。我该怎么办？

任何帮助！

非常感谢。

Answer 1

要通过动态插值在模板内部绑定计算属性，可以使用$root变量。

假设您列出的comp属性是下面的集合，则模板可能如下所示：

<span v-for="n in items">
    <span v-for="m in $root[n.comp]">{{ m }}</span>
</span>

Here's a demonstration of the suggestion.