Vue.js内联模板不显示数据

Question

我试图在Vue.js中使用内联模板，但我无法让它显示数据，以下是我的代码：

Vue.component('food-item', {

    props: ['food'],


})


var app7 = new Vue({
    el: '#app-7',
    data: {
        foodList: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Whatever else humans are supposed to eat' }
        ]
    }
})

HTML代码：

<div id="app-7">
<ol>
    <food-item v-for="item in foodList" v-bind:food="item" v-bind:key="item.address">
    </food-item>
</ol>

<!-- template -->
<food-item inline-template>
    <li>{{ food.text }}</li>
</food-item>
</div>

我得到以下错误：

TypeError: Cannot read property 'text' of undefined

Answer 1

您将其视为指定独立于组件的模板的一种方式。这不是inline-template的工作方式。inline-template属性和模板规范放在您实例化组件的标记中。

​

Vue.component('food-item', {
  props: ['food'],
})


var app7 = new Vue({
  el: '#app-7',
  data: {
    foodList: [{
        id: 0,
        text: 'Vegetables'
      },
      {
        id: 1,
        text: 'Cheese'
      },
      {
        id: 2,
        text: 'Whatever else humans are supposed to eat'
      }
    ]
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app-7">
  <ol>
    <food-item v-for="item in foodList" v-bind:food="item" v-bind:key="item.address" inline-template>
      <li>{{ food.text }}</li>
    </food-item>
  </ol>
</div>

​