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

通过在mount：

上重新初始化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
}

似乎要做的伎俩

绑定Vuejs选择框到Rails

1 个答案: