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

Posted 2023-02-23

【中文标题】在 Vue.js 中加载时未检查复选框

【英文标题】：Checkboxes not getting checked on load in Vue.js

【发布时间】：2019-07-01 23:45:18

【问题描述】：

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

【问题讨论】：

你能把你的axios代码贴在你设置selectedInstruments的地方吗？

在没有看到您如何执行 axios 调用的情况下很难说出如何解决此问题，因为那是不起作用的部分。

@nemesv 请检查更新的问题

不需要 axios 请求就可以看到 htis 不起作用。 selectedInstruments 是一个数组；您正在将数组绑定到复选框。您应该将布尔属性绑定到复选框...

您可以将多个复选框绑定到一个数组，@DavidHeremans。 vuejs.org/v2/guide/forms.html#Checkbox

【参考方案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。

【讨论】：

我只是想问是不是因为这个例子中的 value 是一个可能根据 vue 不同的对象！ :-)

它们是相同的，因为它们是使用 Laravel 关系从同一个表中获取的。

哦，是的。他们有点不同！刚刚注意到！ @Roy 你能告诉我如何在这里制作计算属性吗？