使用Vue JS在陣列中進行默認選擇

Question

我在堆棧溢出處理Vue JS並從數組中選擇默認值單個值中看到很多問題。但是，我需要將每個項目的數組groups與所有組ensemble_groups的數組進行比較，並默認加載正確的選擇。

這裏是如何，我想現在要做到這一點：

<div id="oven"> 
    <template v-for="biscuit in oven"> 
      <!--show checkbox for every available group--> 
      <!--check groups array to see if this ensemble_group should be selected by default--> 
      {{ ensemble_groups }} 
       <input type="checkbox" 
       name="cast_list[@{{ $index }}][groups][]" 
       :checked="biscuit.groups.IndexOf(name) == {{ group_name }}" 
       value="{{ group_name }}" 
         id="g-@{{ $index }}-{{ group_name|slugify }}"> 
       <label for="g-@{{ $index }}-{{ group_name|slugify }}">{{ group_name }}</label> 
       <br> 
      {{ /ensemble_groups }} 
    </template> 
</div> 

所以，我有我的所有組存儲在YAML值ensemble_groups.group_name

匹配存儲在YAML的預定值，其作爲cast_list.groups.value

和我的Vue.js陣列被存儲它們作爲oven.groups.name像這樣：

new Vue({ 
    el: '#oven', 

    data: { 
    oven: [ 
     {{ cast_list }} 
     { 
      groups: [ 
      {{ groups }} 
       { 
       name: "{{ value }}" 
       }, 
      {{ /groups }} 
      ], 
     }, 
     {{ /cast_list }} 
    ] 
    } 
}) 

我是否有道理？我正在比較數組（多個預定義與所有可用）。

因此，如果我有4個ensemble_groups的值，如["Ballroom dancers", "Tap dancers", "Farmers", "Cowboys"]，並將cast_list條目放入兩個組["Tap dancers", "Cowboys"]，我希望在加載頁面時檢查這兩個組的複選框。

幫助？

UPDATE：

我用羅伊的回答讓工作的複選框，但我已經失去了索引值，以保持數據在正確的地方。繼續在How to set incremental counter for nested arrays using Vue JS

Answer 1

Multiple checkboxes can be bound to an array以您想要的方式工作。下面的代碼段列出了旁邊有複選框的ensemble_groups。在此之下，列出cast_groups陣列。 cast_groups數組從一個值開始，但一個計時器以編程方式添加一個值，然後刪除第一個值，以便您可以看到它響應數據更改。您也可以點擊複選框切換成員資格，cast_groups將相應更改。

const v = new Vue({ 
 
    el: 'body', 
 
    data: { 
 
    ensemble_groups: ["Ballroom dancers", "Tap dancers", "Farmers", "Cowboys"], 
 
    cast_groups: ['Tap dancers'] 
 
    } 
 
}); 
 

 
setTimeout(() => { 
 
    v.cast_groups.push('Farmers'); 
 
}, 2000); 
 

 
setTimeout(() => { 
 
    v.cast_groups.$remove('Tap dancers'); 
 
}, 3500);

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<div v-for="group in ensemble_groups"> 
 
    <input type="checkbox" value="{{group}}" v-model="cast_groups">{{group}} 
 
</div> 
 
<ul> 
 
    <li v-for="group in cast_groups">{{group}}</li> 
 
</ul>