Vue.js inline template not displaying data

Question

I am trying to use an inline-template in Vue.js but I can't get it to display data, here is my code:

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 Code:

<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>

I get the following error:

TypeError: Cannot read property 'text' of undefined

Roy J · Accepted Answer · 2017-12-14 14:23:57Z

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>

answered Dec 14, 2017 at 14:23

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js inline template not displaying data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related