Question

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

Answer 1

如果没有循环，您可以在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: ''
}

Answer 2

我不知道v模型不适用于隐藏的输入。在这种情况下，我希望将数据属性添加到按钮并在方法中读取它。既然您要传递一个数据，我认为这可能是最简单的方法。

<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)

}

Vue将隐藏的输入传递给axios

2 个答案: