Vue仅显示最后一个数组项

Question

我有一个Vue组件，我按如下方式遍历数组：

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

$categories数组有3个对象。

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

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

  

项目3
项目3
项目3

Answer 1

您以不起作用的方式混合刀片和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>

<强> HTML

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