如何使用Vuejs为表单字段填充动态数据并正常提交

问题原因 #

你出现这个问题的核心原因是同一个输入组件同时使用了v-model和:value绑定，两者产生了冲突：

• v-model="form.id"是Vue的语法糖，本质是绑定了modelValue属性和update:modelValue事件，会优先使用form.id的值作为输入框内容，同时输入框内容变化时也只会更新form.id
• 你额外添加的:value="promo.id"只控制了输入框的显示值，并没有同步更新到form.id上，这也是你把隐藏框改成文本框时能看到id值，但提交时id还是空的原因——Inertia的表单提交只会读取form对象里存储的属性值，和输入框显示的内容无关。

另外你的promo prop定义不规范，也可能导致取值异常。

解决方案 #

推荐两种方案任选其一即可：

方案1：精简写法，不需要隐藏输入框 #

因为产品id不需要用户修改，你完全可以删掉模板里的id隐藏输入框，只需要在提交表单前手动把id赋值到form对象里即可，代码改动最小：

// 仅需修改submit方法
methods: {
    submit() {
        // 手动给form追加id值
        this.form.id = this.promo.id
        this.form.post(this.route("promotion.submit-request"), {
            preserveScroll: true,
            onSuccess: () => this.form.reset(),
        });
    },
    close() {
        this.$emit('close');
    }
}

方案2：保留隐藏输入框，修正绑定逻辑 #

如果你需要保留表单里的隐藏输入框，按如下步骤修改：

1. 删掉隐藏输入框多余的:value绑定：

<Input
    id="id"
    type="hidden"
    v-model="form.id"
/>

2. 修正promo的prop定义，同时添加监听，每次打开模态框时同步id值：

export default {
    components: {
        Button,
        Input,
        Label,
    },
    props: {
        // 修正prop定义
        promo: {
            type: Object,
            required: true,
            default: () => ({})
        },
        showing: {
            required: true,
            type: Boolean
        }
    },
    // 添加watch监听模态框显示状态
    watch: {
        showing(isShow) {
            if (isShow) {
                // 每次打开模态框时同步最新的产品id
                this.form.id = this.promo.id
            }
        }
    },
    data() {
        return {
            form: this.$inertia.form({
                id: "",
                name: "",
                email: "",
            }),
        }
    },
    // 其余逻辑保持不变
    methods: {
        submit() {
            this.form.post(this.route("promotion.submit-request"), {
                preserveScroll: true,
                onSuccess: () => this.form.reset(),
            });
        },
        close() {
            this.$emit('close');
        }
    }
}

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