Флажки не проверяются при загрузке в 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, флажки не проверяются. Вот ссылка для песочницы

Заранее спасибо.

ОБНОВЛЕНО

вот код аксиоса

        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.Если он выглядит точно так же, как один из них, Вью, похоже, хочет назвать это совпадением.Но если есть несоответствие, скажем, created_at, они не совпадают, и ни один флажок не будет установлен.

Лучше было бы использовать id в качестве value:

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

, тогда у вас просто есть массив id s, который с меньшей вероятностью будет странным образом не соответствовать.Вы можете сделать computed, чтобы превратить ваш массив id s в массив элементов из instruments, если вам нужно.

Это должно работать как вычисленное:

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

Я обновил вашу песочницу, чтобы использовать ее здесь .