Vue的仅显示最后数组项

我有个Vue的组件，我迭代数组如下：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

来源

2016-03-02 user1012181

你搅拌叶片和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>

来源

2016-03-02 04:41:18 Jeff

我已经添加了这个JS文件：'Vue.component（ '手风琴'，{ 模板： '＃手风琴体'，数据：功能（） { return { open：false， categories：{!! json_encode（$ categories）!!} } }，方法：{ toggleOpen：function（）{ this.open =！this.open; } } }）;'但它显示json编码区域中的错误。 – user1012181

尝试使用Json.parse（）打包Json.parse（{!! json_encode（$ categories）!!}） – naneri

Vue的仅显示最后数组项

回答

相关问题