在vue中获取未选中复选框的空值

Posted 2021-04-06

伙计们，我是Vue的新手，任何人都可以建议我这里做错了代码

<tr v-for="(item,index) in items">
  <td class="fancy">
     <input type="text" v-model="name[index]">
  </td>
  <td class="fancy">
     <input type="checkbox" v-model="checkview[index]" true-value="1" false-value="0" >
  </td>
  <td class="has-text-right">
      <input type="checkbox" v-model="checkedit[index]" > 
   </td>
   <td class="has-text-right">
      <input type="checkbox" v-model="checkupdate[index]" >    
   </td>
  <td class="has-text-right">
      <input type="checkbox" v-model="checkdelete[index]" > 
  </td>
</tr>

在脚本中

   export default {
     data(){
        return{
                checkview:[],
                checkedit:[],
              checkupdate:[],
              checkdelete:[],
           }
         }
 methods: {
      submitTb(){
           console.log(this.checkview)
           console.log(this.checkedit)
           console.log(this.checkupdate)
           console.log(this.checkdelete)
           }
    }

假设项目长度为3表示3次checkview，checkedit，checkupdate和checkdelete创建前端的插图如下

 items list | checkview  | checkedit   | checkupdate  | checkdelete
   --------------------------------------------------------------
    item1   | uncheckbox |  uncheckbox | uncheckbox | uncheckbox 
    item2   | uncheckbox |  uncheckbox | uncheckbox | uncheckbox 
    item3   | uncheckbox |  uncheckbox | uncheckbox | uncheckbox 

现在我的问题是，当我在控制台登录submitTb函数时，我什么都没有，即没有值预期值[0,0,0]，但不知道为什么它变空了任何身体告诉我如何分配初始值复选框为0即如果用户直接点击提交按钮，那么console.log应该像[0,0,0]我缺少什么

答案

你好@rocky你可以在axios成功的地方尝试这样的东西，你得到的物品就像这样分配初始值

for (var i = 0; i < response.data.length; i++) {

      self.checkview[i]=false
      self.checkedit[i]=false
      self.checkupdate[i]=false
      self.checkdelete[i]=false
 }