为什么不使用checked属性true vuejs渲染复选框

Posted 2021-04-06

我正在编写一个编辑表单，碰巧我有几个选项可供选择，这些选项是通过带有axios的ajax获得的，我将它们分配给组件的变量permisos，后者通过v-for渲染，我已检查的元素它们在分配给vue模型的数组selected中，如下所示

<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调用，知道在编辑项目之前我有什么选项，知道我将分配check属性的选项或复选框，这是我有问题的地方没有正确检查。

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模型，代码可以正常工作。为什么会这样？

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

答案

您不需要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中的表单输入很快变得复杂。

另一答案

你需要将它们的ID保存在“选定的”数组中，你可能会保留整个对象，这些对象与我检查的不一致。

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>

查看：

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);