Vue.js复选框绑定值无法获取输入框修改内容 始终返回数据库默认值问题

问题根源 #

• 文本输入框仅使用 :value="value"做单向绑定，修改的内容不会同步回list数组的对应项，页面触发重渲染时输入框的值就会跳回数据库返回的初始值
• 复选框的:value绑定的是循环初始化时的静态值，后续list对应项修改后，复选框绑定的值不会自动更新，所以checkedFiles里存储的始终是初始的原始值
• 同循环内复选框和输入框都用index作为id，存在DOM id重复冲突，可能引发异常行为

解决方案 #

完整修改后代码 #

<template>
    <div class="input-group mb-3 active" v-for="(value, key, index) in list" :key="index">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input 
                    type="checkbox" 
                    v-model="checkedFiles" 
                    :id="`checkbox_${index}`" 
                    :value="list[index]" 
                    aria-label="Checkbox for following text input"
                >
            </div>
        </div>
        <input 
            type="text" 
            v-model="list[index]" 
            :id="`input_${index}`" 
            class="form-control" 
            aria-label="Text input with checkbox"
        >
    </div>

    <button class="btn btn-success btn-sm" v-show="isVisible" @click="generate">Generate List</button>
</template>

<script>
    export default {
        name: "directories-component",
        data() {
            return {
                list: [],
                checkedFiles: [],
                // 补充原代码缺失的isVisible初始值
                isVisible: true
            }
        },
        methods: {
            getTheList() {
                // 原有接口请求逻辑保持不变
                //....
                // this.list = res.data.data;
                //....
            },
            generate(e) {
                e.preventDefault();
                // 此时输出的checkedFiles就是输入框修改后的最新值
                console.log(this.checkedFiles);
            }
        },
        mounted() {
            this.getTheList()
            console.log('Component mounted.')
        }
    }
</script>

核心修改点 #

1. 文本输入框将单向绑定:value="value"改为双向绑定v-model="list[index]"，输入的内容会实时同步到list数据源，不会再出现修改后跳回初始值的问题
2. 复选框的:value绑定改为list[index]，确保绑定的是数据源的最新值，勾选时存入checkedFiles的就是修改后的值
3. 修复了DOM id重复的问题，给复选框和输入框的id加上不同前缀避免冲突
4. 补上了原代码缺失的isVisible变量初始值，避免控制台报错

特殊场景说明 #

如果你的list数组存储的是对象而不是字符串，只需要把双向绑定的路径对应到对象的字段即可，比如值存在对象的title字段，就改成v-model="list[index].title"，复选框的:value也对应修改为list[index].title即可。

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