Vue.js x-template无法在v-for上显示值

我在尝试将html呈现到vue组件时遇到了这个问题。 我正在尝试通过x-template插入组件html。问题是当我试图像这样显示值

{{I.value}}

时，它在控制台上抛出了错误

<script type="text/x-template" id="first-template">
    <div>
         <ul>
           <li v-for="i in dataCollection">{{ i.id }}</li>
        </ul>
    </div>
</script>


Vue.component('menu', {
    template: '#first-template',
    data() {
        return {
            dataCollection: [{"id":"01"}, {"id":"02"}, {"id":"03"}],
        }
    }
});

{{i.id}

Vue.component（'菜单'{
模板：“#第一个模板”，
数据（）{
返回{
数据收集：[{“id”：“01”}，{“id”：“02”}，{“id”：“03”}]，
}
}
});

控制台上的错误为：

但当我把价值作为属性给出时，比如：

<script type="text/x-template" id="first-template">
    <div>
            <ul>
              <li v-for="i in dataCollection" :id="i.id"></li>
           </ul>
       </div>
</script>

它工作得很好

有人知道有什么办法吗

在2.2.0+中，当对组件使用v-for时，现在需要一个键

---

你可以在这里阅读

这是一个建议，不是答案

正如@DmitriyPanov提到的，在使用

v-for

时，最好绑定唯一键

另一个问题是，您最好使用非内置/重新转换的html元素

因此，将组件id从

菜单

更改为

v菜单

，或者您喜欢的其他方式

然后模拟下面运行良好的类似代码

我怀疑该错误是由

数据收集的某些元素没有key=id（可能您没有发布所有元素）引起的。您可以尝试
{{'id'在i？i.id:'None'}}
中


Vue.component（'v-menu'，{//
模板：“#第一个模板”，
数据（）{
返回{
newDataCollection:[{“id”：“01”}，{“id”：“02”}，{“id”：“03”}，{'xx'：0}]，
数据收集：[{“id”：“01”}，{“id”：“02”}，{“id”：“03”}]
}
}
});
新Vue({
el:“#应用程序”，
数据（）{
返回{testProperty:{
“测试”：“1”
}}
},
方法：{
测试：函数（）{
}
}
})

旧的：


{{i.id}

调整后：


{{i？i.id:'None'}


您不应该将script/x-template标记放在挂载到主实例的元素内部。Vue 2.0将读取其所有内容，并尝试将其用作主实例的模板，Vue的virtualDOM将脚本/x模板视为普通DOM，这会把一切都搞砸

简单地将模板移出主元素就解决了这个问题

我认为这里的问题在于X模板代码的位置（我也有同样的问题）。根据文件：

您的x模板需要在Vue所连接的DOM元素之外定义

如果您使用的是某种CMS，您可能最终会这样做

在这种情况下，帮助我的是（基于您的示例）：

将X模板脚本放置在#应用程序之外
将集合作为道具传递给v-menu组件：
我希望这对任何人都有帮助。
谢谢你的回复。但它仍然在控制台上显示相同的错误，即“i未定义”@HariGopal i没有错误，但可能是您必须将组件重命名为另一个名称，因为菜单是保留名称，您可以在这里看到，当我在我的问题属性上标注尺寸时，它已经很好地加载了。谢谢您的回复。我已经尝试了你们所有的建议，但它仍然在控制台上显示相同的错误，“我没有定义”
<v-menu v-bind:data-collection="dataCollection"></v-menu>

Vue.component('v-menu', { //
    template: '#first-template',
    props: [ "dataCollection" ],
    ...
});