在 Vue.js 中加载时未检查复选框

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"
  />

那么你只有一个ids 数组，它不太可能出现奇怪的不匹配。如果需要，您可以创建一个 computed 以将您的 ids 数组转换为来自 instruments 的项目数组。

这应该作为计算出来的：

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

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