[Vuejs]-Vue displaying only last array item

by

0👍

You’re mixing blade and vue in a way that doesn’t work. Your template comes after the for loop, so the value of $category when you get to the template is just the last element from the array.

You should go all-in with Vue like so:

JS:

var Accordion = Vue.extend({
  props:['category'],
  template:'#accordian-body'
});

Component

...
data:function(){
  return {
    categories: {!! json_encode($categories) !!}
  }
},
components:{
  accordion:Accordion
}
...

Accordion Template

<script id="accordian-body" type="x-template">
    <h4 v-on:click="toggleOpen()">@{{category.name}}</h4>
</script>

HTML

<accordian v-for="category in categories" :category="category"></accordian>

Leave a comment