Vue 只显示最后一个数组项答案

【问题标题】：Vue displaying only last array itemVue 只显示最后一个数组项
【发布时间】：2016-06-14 18:39:45
【问题描述】：

我有一个 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

【问题讨论】：

【解决方案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>

【讨论】：

我已经在js文件中添加了这个：Vue.component('accordian', { template: '#accordian-body', data: function(){ return { open: false, categories: {!! json_encode($categories) !!} } }, methods: { toggleOpen: function(){ this.open = !this.open; } } });，但是它在json编码区域显示错误。
尝试使用 Json.parse() 像 Json.parse({!! json_encode($categories) !!}) 进行包装