VueExtras2

by abds040

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.core.min.js"></script>

<div id="app">
  <h3>
    VUE Extras 2
  </h3>
  <ol>
    <list-item></list-item>
    <list-item2
      v-for="item in itemList"
      v-bind:item="item"
      v-bind:key="item.id">
      </list-item2>
  </ol>
</div>

<script>
Vue.component('list-item', {
  template: '<li>This is an item33333331</li>'
})
Vue.component('list-item2', {
  props: ['item'],
  template: '<li><b>{{item.text}}  </b></li>'
})

window.app = new Vue({
  el: '#app',
 	data: {
    itemList: [
      { id: 0, text: 'Pizza Salami' },
      { id: 1, text: 'Pizza Hawaii' },
      { id: 2, text: 'Pizza Diavolo' }
    ]
  }
});


/*
 data: {
    groceryList: [
      { id: 0, text: 'Pizza Salami' },
      { id: 1, text: 'Pizza Hawaii' },
      { id: 2, text: 'Pizza Diavolo' }
    ]
  }
  */

</script>