Question

我在尝试将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"}],
        }
    }
});

控制台上的错误是：

但是当我将值赋予属性时：

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

它完美无缺。

任何人都知道任何修复？

Answer 1

您不应将script / x-template tages放在要装入主实例的元素内。 Vue 2.0将读取其所有内容，并尝试将其用作主要实例的模板，而Vue的virtualDOM则将脚本/ x-template当作普通DOM一样对待，而DOM则无处不在，

只需将模板移出主要元素即可解决问题。

Source

Answer 2

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

您可以在此处阅读https://vuejs.org/v2/guide/list.html#v-for-with-a-Component

Answer 3

这是一个建议，而非答案。

正如@DmitriyPanov所提到的，在使用v-for时，您最好绑定唯一键。

另一个问题是你最好使用非内置/重新分割的html元素。

将组件ID从menu更改为v-menu，或者您喜欢。

然后模拟下面类似的代码正常工作。

我怀疑错误是由dataCollection的某些元素引起的，它们没有key = id（可能你没有发布所有元素）。您可以尝试{{ 'id' in i ? i.id : 'None' }}。

＆＃13;

Vue.component('v-menu', { //
    template: '#first-template',
    data() {
        return {
            newDataCollection: [{"id":"01"}, {"id":"02"}, {"id":"03"}, {'xx':0}],
            dataCollection: [{"id":"01"}, {"id":"02"}, {"id":"03"}]
        }
    }
});

new Vue({
  el: '#app',
  data() {
    return {testProperty: {
      'test': '1'
    }}
  },
  methods:{
    test: function() {
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<v-menu></v-menu>
</div>

<script type="text/x-template" id="first-template">
    <div>
      <div style="float:left;margin-right:100px;">
        <p>Old:</p>
         <ul>
           <li v-for="(i, index) in dataCollection" :key="index">{{  i.id }}</li>
        </ul>
      </div>
      <div>
        <p>Adjusted:</p>
         <ul>
           <li v-for="(i, index) in newDataCollection" :key="index">{{ 'id' in i ? i.id : 'None' }}</li>
        </ul>
      </div>
    </div>
</script>

＆＃13;

Answer 4

我认为这里的问题在于X-Template代码的位置（我有同样的问题）。根据文档：

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

如果您正在使用某种CMS，您可能最终只会这样做。

在这种情况下对我有帮助的是（根据您的示例）：

将X-template脚本放在#app之外
将集合作为道具传递给v菜单组件：

<v-menu v-bind:data-collection="dataCollection"></v-menu>

将dataCollection列为v菜单组件内部的道具：

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

我希望对任何人都有帮助。

x-template无法在v-for

4 个答案: