Laravel Vue.js中加载时未选中复选框

我有一个使用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 }
      ]
    };
  }

---

你在建模方面做了一个脆弱的选择。

selectedInstruments

中的对象实际上不是

instruments

中的对象之一。如果它看起来和其中一个一模一样，Vue似乎愿意称之为匹配。但是如果在处创建的

中存在不匹配，则它们不相同，并且不会选中任何框

更好的方法是使用
id
作为
值
：

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

我已经更新了您的沙盒以使用它。
您可以将您的axios代码发布到您设置所选仪器的位置吗？如果不了解您是如何进行axios调用的，就很难知道如何修复此问题，因为这是不起作用的部分。@nemesv请检查更新的问题，即不需要axios请求来查看htis是否起作用。所选的仪器是一个数组；您正在将数组绑定到复选框。您应该将布尔属性绑定到复选框…您可以将多个复选框绑定到一个数组@DavidHeremans。我只是想问，这是否是因为本例中的值是一个对象，根据vue的不同，它可能会有所不同！：-）它们是相同的，因为它们是使用Laravel关系从同一个表中获取的。哦，是的。他们有点不同！刚刚注意到@罗伊，你能告诉我怎么在这里做计算财产吗？
 <input
    type="checkbox"
    :id="index"
    v-model="selectedInstruments"
    :value="instrument.id"
  />

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