为什么不渲染具有选中属性 true vuejs 的复选框答案

【问题标题】：Why do not render checkboxes with checked attribute true vuejs为什么不渲染具有选中属性 true vuejs 的复选框
【发布时间】：2018-09-15 01:13:28
【问题描述】：

我正在处理一个编辑表单，碰巧我有几个选项可供选择，这些选项是通过带有 axios 的 ajax 获得的，我将它们分配给稍后通过 v-for 呈现的组件的变量 permisos，选中的元素我将它们放在数组selected 中，该数组分配给 vue-model，如下所示

<div class="row">
  <div v-for="permiso in permisos" class="col-md-5 col-12 col-sm-5" >                       
      <input type="checkbox" :value="permiso.id" 
         class="form-control" :id=permiso.id
         v-model="selected" :checked=selected.filter(e => e.id === permiso.id).length > 0 > {{ permiso.name}}
  </div>
</div>

稍后我进行另一个 ajax 调用以了解在编辑项目之前我有哪些选项以了解哪些选项或复选框我将分配选中的属性，这是我遇到问题的地方没有正确检查。

axios.get('api/allpermisos')
  .then(response =>{
    this.permisos = response.data; //dataok
  })
if(this.action===2){
  axios.get('api/allpermisos/'+ this.dataobject.id)
    .then(response =>{
        this.selected = response.data;//data ok
    })
}

当我从已选择的选项中获取 ajax 调用时，我该怎么做才能自动分配选中的属性，而没有分配的属性不会被分配。尝试包含但我没有想要的结果？

如果我删除 v-model，代码可以正常工作。为什么会这样？

<input type="checkbox" :value="permiso.id" class="form-control" 
        :id=permiso.id  :checked=selected.filter(e => e.id === permiso.id).length > 0 > {{ permiso.name}}

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您不需要同时使用 v-model 和 :checked。 v-model is a two way binding.

https://jsfiddle.net/bbsimonbb/eywraw8t/15613/

<div v-for="permiso in permisos" class="col-md-5 col-12 col-sm-5" >                       
    <input type="checkbox" :value="permiso.id" 
       class="form-control" :id=permiso.id
       v-model="selected"> {{ permiso.name}}
</div>

考虑为您的输入创建一个组件。 v-for 中的表单输入很快就会变得复杂。

【讨论】：

非常感谢您的澄清，有些东西告诉我还有一些东西。现在有一个问题是只为 v-for 中的组件或所有输入类型选择等创建组件？
是的。现在我们摆脱了 :checked 表达式，我认为这样就很好了，如果它在组件中可能会更难理解。别担心。

【解决方案2】：

您需要将它们的 id 保存在“selected”数组中，您可能会保留整个对象，这些对象在我检查的内容中不起作用。

HTML：

<div id="app">
  <div class="row">
    <div v-for="permiso in permisos" class="col-md-5 col-12 col-sm-5" >                       
        <input type="checkbox" :value="permiso.id" 
           class="form-control" :id=permiso.id
           v-model="selected" :checked=selected.includes(permiso.id)> {{ permiso.name}}
    </div>
  </div>
</div>

Vue：

new Vue({
  el: '#app',
  data() {
    return {
      selected: [2, 4],
      permisos: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}, {id: 4, name: "test4"}]
    }
  }
})

https://jsfiddle.net/eywraw8t/15555/

这行得通。如果你得到对象数组作为响应，你可以这样做：

this.selected = response.data.map(obj => obj.id);

【讨论】：