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的僅顯示最後數組項

回答

相關問題