vue.js - 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>

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

标签： vue.jsvuejs2

Answer 1

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

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

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

这是该建议的演示。