Vue 将隐藏的输入传递给 axios答案

【问题标题】：Vue pass hidden input to axiosVue 将隐藏的输入传递给 axios
【发布时间】：2021-01-31 23:59:23
【问题描述】：

我想使用 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 传递隐藏的输入？

【问题讨论】：

contractor.user_id 这个值是从哪里来的？？这是在循环吗？？
是的，它在一个 v-for 循环中
这能回答你的问题吗？ laravel vue getting info by hidden field

标签： javascript html laravel vue.js

【解决方案1】：

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

<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: ''
}

【讨论】：

【解决方案2】：

我不知道 v-model 不适用于隐藏输入。在这种情况下，我更愿意为按钮添加一个数据属性并在方法中读取它。既然你想传递一个数据，我认为这可能是最简单的方法。

<button :data-user="contractor.user_id">Accept budget</button>

async acceptBudget (event) {
  this.budget_form.user_id = event.target.querySelector("button").dataset.user;
  await axios.post('/api/maintenances/respond/budget', this.budget_form)

}

【讨论】：