Laravel 仅显示最后一个数组项的Vue

我有一个Vue组件，我在数组上迭代，如下所示：

@if($categories!=null)
    @foreach($categories as $category)
       <accordian></accordian>
    @endforeach
@endif

当我运行这个时，我总是得到手风琴中的最后一个数组对象。计数正确（本例中为3），但数据始终相同。为什么会这样

项目3
项目3
项目3

---

您正在以一种不起作用的方式混合blade和vue。模板位于for循环之后，因此到达模板时，

$category

的值只是数组中的最后一个元素

您应该像这样全力支持Vue：

JS:

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

组件

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

手风琴模板

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

@{{category.name}

HTML

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

---

我已将其添加到js文件中：

Vue.component（'accordian'，{template:'accordian body'，data:function（）{return{open:false，categories:{！！json_encode（$categories）！！}}}，方法：{toggleOpen function（）{this.open=！this.open；}）

但它在json编码区域显示错误。请尝试使用json.parse（）像json.parse（{！！json_encode（$categories）！！}）一样包装

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