Bind VuejsをRailsに選択する

Question

いくつかの選択ボックスでVuejsフォームを作成しています。私は正常にフォームを介して自分のRailsアプリケーションに投稿することができました。しかし、同じオブジェクトを編集すると、正しい選択ボックスがあらかじめ選択されていません。例えば

、私がチェックすると：

Item 1 
X Item 2 
    Item 3 
X Item 4 

は、データベース内のフォームの記憶Item 2とItem 4を提出します。しかし、私はもう一度フォームを編集するとき、VUEが選択されているものとして次のことを示しています

X Item 1 
X Item 2 
    Item 3 
    Item 4 

意図したとおりにバインディングが動作していないためです（私は実際の配列の値とは対照的に、それはインデックス値によって結合だと思います要素のテキスト）。私はこのグリッチを修正する方法を理解することができませんでした。

ChromeのVue.jsコンソールを見ると、checkedAmenitiesは['Item 2', 'Item 4']の配列であることがわかりますが、これはテンプレートに正しく反映されていません。ここで

は私のコードです：

<div v-for="(amenity, idx) in amenities"> 
    <label class="custom-control custom-checkbox"> 
    <input type="checkbox" class="custom-control-input" v-model="checkedAmenities[idx]" :value="amenity.id"> 
    <span class="custom-control-description">{{ amenity.text }}</span> 
    </label> 
</div> 

と私のVue：

Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('input[name="authenticity_token"]').getAttribute('value'); 
var listingForm = document.getElementById('listing_form'); 
var listing = JSON.parse(listingForm.dataset.listing); 

const listingForm = new Vue({ 
    el: '#listing-multistep', 
    data: { 
    amenities: [ 
     {id: 0, text: "Item1"}, 
     {id: 1, text: "Item2"}, 
     {id: 2, text: "Item3"}, 
     {id: 3, text: "Item4"} 
    ], 
    checkedAmenities: listing.amenities 
    } 
}) 

にはどうすれば正しくフォームにcheckedAmenitiesに格納された値をバインドすることができますか？事前

Answer 1

で

おかげでマウント上checkedAmenitiesの値を再初期化することにより、これを解決：

mounted: function() { 
    var newArray = [] 
    for(var i = 0; i < this.amenities.length; i++){ 
    if(this.checkedAmenities.includes(this.amenities[i].text)) { 
     newArray.push(true) 
    } else { 
     newArray.push(false) 
    } 
    } 
    this.checkedAmenities = newArray 
} 

は、トリックを行うようだ