Vue表单复选框自动移除空字符串功能实现方案咨询

问题原因 #

• 你写的DetectedEmptyString方法仅生成过滤后的新数组，未将结果赋值给绑定的socialMedia变量，原数组不会发生变更，因此逻辑不生效
• 空字符串的产生源头是addType方法未做非空校验就直接push内容，优先在源头拦截比事后过滤更合理
• 额外注意：你的data中声明了selected数组，但复选框的v-model绑定的是socialMedia，存在变量不统一的问题需要先修正

修正方案 #

第一步：修改JS逻辑

export default {
  data() {
    return {
      // 统一变量名和模板绑定的socialMedia对齐
      socialMedia: [],
      choices: ['Facebook', 'Instagram', 'Twitter', 'Word of Mouth', 'KMAZ 102.5fm'],
      isDisabled: true,
      other: '',
    }
  },
  methods: {
    onclick() {
      this.isDisabled = !this.isDisabled
      if (this.socialMedia.length) {
        this.socialMedia = this.socialMedia.filter(s => s !== this.other)
      }
      this.other = ''
    },
    addType() {
      // 先做非空校验+去重，符合要求才加入数组
      const trimedOther = this.other.trim()
      if (trimedOther && !this.socialMedia.includes(trimedOther)) {
        this.socialMedia.push(trimedOther)
        // 加完清空输入框，避免重复点击重复添加
        this.other = ''
      }
    },
    // 兜底过滤方法，提交前调用可确保无空值
    filterEmptyValue() {
      this.socialMedia = this.socialMedia.filter(x => x.trim() !== "")
    }
  }
}

第二步：模板调整（可选，建议移除无效的change绑定）

<div class="form-group">
   <p class="required">4. 您是如何得知我们的分销渠道的？</p>
   <p id="skip">可多选</p>
   <b-form-checkbox v-for="item in choices" :key="item" :value="item" v-model="socialMedia" required> {{ item }} </b-form-checkbox>
   <b-form-checkbox v-on:click="onclick"> 其他： </b-form-checkbox>
      <input type="text" class="form-control" :disabled='isDisabled' v-model="other">
      <button name="btn" v-show="!isDisabled" @click="addType" required>+</button>
   <span class="mt-3">已选： <strong>{{ socialMedia }}</strong></span>
   <br>
   <span class="mt-3">额外选项： <strong>{{ other }}</strong> <br><label id="small">自定义选项请记得点击+按钮确认</label></span>
</div>

如果需要百分百确保最终提交的数组没有空值，可以在表单提交前再调用一次filterEmptyValue方法做兜底校验即可。

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