时间戳

首页 > 解决方案 > Vue 将隐藏的输入传递给 axios

javascript - Vue 将隐藏的输入传递给 axios

问题描述

我想使用 axios 将以下隐藏输入传递给 laravel。我知道 V 模型不适用于隐藏输入

<form @submit.prevent="acceptBudget" >
    <input type="hidden" name="contractor_user_id" :value="contractor.user_id">
    <input type="text"  v-model="budget_form.budget">
    <button>Accept budget</button>
</form>

这是我的 Vue 数据属性

data() {
    return {
        budget_form: {
            accept_budget: '1',
            budget: '',
        }
    }
}

这是我发布数据的方法

methods: {
    async acceptBudget () {
        await axios.post('/api/maintenances/respond/budget', this.budget_form)
    }
}

如何通过 axios 传递隐藏的输入？

标签： javascripthtmllaravelvue.js

解决方案

如果没有循环，您可以简单地在 vue end 中设置隐藏的输入值。但是正如您所说的值来自循环，一个可能的解决方案是将隐藏的输入值与表单提交一起传递。

<form @submit.prevent="acceptBudget(contractor.user_id)" >
    <input type="text" v-model="budget_form.budget">
    <button>Accept budget</button>
</form>

然后以具有该值的方法更新形式

methods: {
    async acceptBudget(user_id) {
        this.budget_form.user_id = user_id;
        await axios.post('/api/maintenances/respond/budget', this.budget_form)
    }
}

你的表单对象是

budget_form: {
    accept_budget: '1',
    budget: '',
    user_id: ''
}

推荐阅读