Vue js如何在v-for循环中渲染大括号变量答案

【问题标题】：Vue js how render curly brackets variables with in v-for loopVue js如何在v-for循环中渲染大括号变量
【发布时间】：2018-09-27 09:33:11
【问题描述】：

在我的数据对象中

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>

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

【问题讨论】：

你需要这样的东西吗？ {{ '{' + n.comp + '}' }}

标签： vue.js vuejs2

【解决方案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.

【讨论】：

这只有在计算的属性都在根元素中时才有效。