Vue中未勾选复选框获取空值问题求助（附代码）

嘿，兄弟，我来帮你排查这个复选框未勾选时拿空值的问题～

首先先揪出一个明显的笔误：你最后那个复选框写的是v-mode，少了个字母l，得改成v-model，不然Vue根本识别不了这个指令，这肯定会导致值绑定出问题！

接下来是核心问题：你绑定的数组没有初始化对应的值。Vue的响应式系统需要初始值来追踪数据变化，如果checkview、checkedit这些数组一开始是空的，或者和items的长度不匹配，当复选框没勾选的时候，Vue没法自动给对应索引设置默认值（比如你要的0或者false），自然就会拿到空值或者undefined。

给你具体的解决步骤：

1. 修正模板里的语法错误 #

把所有v-mode都改成v-model，修正后的模板片段大概是这样：

<tr v-for="(item,index) in items" :key="index">
  <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>
  <!-- 其他复选框也要确保v-model拼写正确 -->
</tr>

2. 初始化绑定的数组 #

在组件的data里，要给name、checkview、checkedit这些数组设置和items长度匹配的初始值。比如你如果是从接口获取items数据，就在拿到数据后初始化这些数组：

data() {
  return {
    items: [],
    name: [],
    checkview: [],
    checkedit: []
  }
},
created() {
  // 假设这里是你获取items数据的逻辑，比如调用接口
  this.items = [/* 你的列表数据 */];
  
  // 初始化绑定数组，确保每个位置都有初始值
  this.name = this.items.map(() => ''); // 文本框初始为空字符串
  this.checkview = this.items.map(() => '0'); // 和false-value的"0"对应，未勾选时就是0
  this.checkedit = this.items.map(() => false); // 布尔值类型的复选框初始为false
}

为什么要这么做？ #

• 对于用了true-value和false-value的复选框（比如checkview），只有初始值和false-value一致，未勾选时才会保持你想要的0，而不是空值；
• 普通布尔值的复选框（比如checkedit），初始化为false，未勾选时就会返回false，不会出现空值；
• 保证数组长度和items一致，v-for循环时每个索引都有对应的绑定值，Vue才能正确追踪每个复选框的状态。

你按照这个方法改完，应该就能解决未勾选时拿空值的问题啦～

内容的提问来源于stack exchange，提问作者user8411743