Vue.js如何根据checkbox勾选状态激活textbox并通过v-model获取值

第一步：调整模板代码 #

<div class="form-group">
   <label class="required"> Social Media </label>
   <b-form-checkbox value="Facebook" v-model="selected"> FaceBook </b-form-checkbox>
   <b-form-checkbox value="Instagram" v-model="selected"> Instagram </b-form-checkbox>
   <b-form-checkbox value="Twitter" v-model="selected"> Twitter </b-form-checkbox>
   <!-- 给Other复选框设置固定标记值 -->
   <b-form-checkbox value="other" v-model="selected"> Other:</b-form-checkbox>
   <!-- 绑定输入框值，通过选中状态直接判断是否禁用 -->
   <input type="text" class="form-control" v-model="otherVal" :disabled="!selected.includes('other')">
   <span class="mt-3">Selected: <strong>{{ finalSelected }}</strong></span>
</div>

第二步：调整Vue实例逻辑 #

export default {
    data() {
        return {     
            selected: [],
            otherVal: '' // 存储Other文本框的输入内容
        };
    },
    computed: {
        // 最终提交使用的数组，自动处理格式
        finalSelected() {
            // 先过滤掉Other的标记值
            const result = this.selected.filter(item => item !== 'other')
            // 勾选Other且输入框有有效值时，把输入内容加入结果
            if (this.selected.includes('other') && this.otherVal.trim()) {
                result.push(this.otherVal.trim())
            }
            return result
        }
    },
    watch: {
        // 取消勾选Other时自动清空输入内容，避免无效值残留
        selected(newVal) {
            if (!newVal.includes('other')) {
                this.otherVal = ''
            }
        }
    }
}

逻辑说明 #

最终提交表单时直接使用finalSelected即可得到你需要的输出格式，无需额外处理：

• 未勾选Other时，结果只包含选中的固定平台
• 勾选Other且输入内容后，输入值会自动追加到结果数组中
• 取消勾选Other时会自动清空输入内容，不会出现冗余值

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