我有一个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
答案 0 :(得分:0)
您以不起作用的方式混合刀片和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>