Question

我有一个使用Vue.js和Laravel的项目。我有一些复选框可以选择乐器（音乐）。让我解释一下我要做什么有带有复选框的仪器列表... 加载时，我需要显示用户已经选择了哪些工具，应该选中这些复选框。

这是我的代码

 <div v-for="(instrument, index) in instruments">
  <input
    type="checkbox"
    :id="index"
    v-model="selectedInstruments"
    :value="instrument"
  />
  <label :for="index">{{ instrument.instrument }}</label>
</div>


  data() {
    return {
      instruments: [
        { id: 1, instrument: "guitar", created_at: null, updated_at: null },
        { id: 2, instrument: "drums", created_at: null, updated_at: null },
        { id: 3, instrument: "piano", created_at: null, updated_at: null }
      ],
      selectedInstruments: [
        { id: 2, instrument: "drums", created_at: null, updated_at: null }
      ]
    };
  }

这里一切正常，但是当来自axios的数据相同时，未选中复选框。 Here is the link for sandbox

谢谢。

已更新

这是axios代码

        created(){
                getAllLists(){
            axios.get('/all-lists')
                 .then(response=>{
                  this.instruments = response.data;
                 })
          }

     this.selectedInstruments = this.currentList; 
          }

// this.currentList is a prop which is passed in blade file it is getting same structured data as above array from axios

Answer 1

您已经在建模中做出了艰难的选择。 selectedInstruments中的对象实际上不是instruments中的对象之一。如果它看起来完全像其中之一，Vue似乎愿意将其称为匹配项。但是，如果存在不匹配的情况，例如created_at，则它们不相同，因此不会选中任何框。

一个更好的主意是将id用作value：

 <input
    type="checkbox"
    :id="index"
    v-model="selectedInstruments"
    :value="instrument.id"
  />

然后，您只有id的数组，不太可能出现奇怪的不匹配。如果需要，您可以制作一个computed，将id的数组转换成instruments中的项的数组。

这应该像计算的那样工作：

selectedInstrumentObjects() {
  return this.selectedInstruments.map((id) => this.instruments.find((obj) => obj.id === id));
}

我已经更新了您的沙盒以使用它here。

在Vue.js中未选中复选框

1 个答案: