[Vuejs]-Vue.js inline template not displaying data

by

4👍

✅

You’re treating it as a way of specifying the template separate from the component. That’s not how inline-template works. The inline-template attribute and the template specification go in the tags where you’re instantiating the component.

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>
👤Roy J

Leave a comment