我的应用程序是 Rails API 后端和通过 Nuxt 前端的 VueJS。
我有一个表单,其中一个输入是一个选择,我正在使用vue-multiselect。选择选项是来自不同表的值,我想在其中显示名称字段,但提交 ID。
我可以在下拉菜单中显示选项 ok,我还在表单中提交其他值,但 ID 不起作用。
Rails 控制台显示distillery_id
不是允许的参数的错误,尽管我确实在控制器中设置了这个。
Started POST "/api/v1/gins" for ::1 at 2019-02-01 13:25:38 +0000
Processing by Api::V1::GinsController#create as HTML
Parameters: {"gin_name"=>"distillery_id", "description"=>"distillery_id should be submitted", "distillery_id"=>{"id"=>3, "distillery_name"=>"Gordon's", "snippet"=>nil, "description"=>nil, "website"=>nil, "country"=>"United Kingdom", "created_at"=>"2019-01-29T13:46:15.088Z", "updated_at"=>"2019-01-29T13:46:15.088Z", "slug"=>nil}, "abv"=>"0", "snippet"=>"distillery_id now?", "gin"=>{"gin_name"=>"distillery_id", "snippet"=>"distillery_id now?", "description"=>"distillery_id should be submitted", "abv"=>"0", "distillery_id"=>{"id"=>3, "distillery_name"=>"Gordon's", "snippet"=>nil, "description"=>nil, "website"=>nil, "country"=>"United Kingdom", "created_at"=>"2019-01-29T13:46:15.088Z", "updated_at"=>"2019-01-29T13:46:15.088Z", "slug"=>nil}}}
Unpermitted parameter: :distillery_id
gins_controller.rb
...
def gin_params
params.require(:gin).permit(:gin_name, :alcoholic, :snippet, :description, :abv, :distillery_id)
end
...
新的.vue
<template>
<section class="container">
<div>
<h1>Gins</h1>
<form @submit.stop.prevent="addGin">
<h2>New Gin</h2>
<p>
<label for="gin_name" class="input-label">Title:</label>
<input id="gin_name" v-model="gin_name" type="gin_name" name="gin_name" class="input">
</p>
<p>
<label for="snippet" class="input-label">Snippet:</label>
<input id="snippet" v-model="snippet" type="text" name="snippet" class="input">
</p>
<p>
<label for="description" class="input-label">Description:</label>
<input id="description" v-model="description" type="textarea" name="description" class="input">
</p>
<p>
<label for="abv" class="input-label">ABV%:</label>
<input id="abv" v-model="abv" type="number" name="abv" class="input">
</p>
<div>
<label for="distillery_id" class="input-label">Distillery:</label>
<multiselect
v-model="distillery_id"
track_by="distillery_id"
:options="options"
:searchable="true"
placeholder="Choose One Distillery"
:custom-label="label"
>
</multiselect>
</div>
<p>
<input type="submit" value="Submit" class="button">
</p>
</form>
</div>
</section>
</template>
<script>
import axios from 'axios'
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data() {
return {
gin_name: '',
snippet: '',
description: '',
abv: '',
distillery_id: '',
options: []
}
},
mounted() {
this.getDistilleries()
},
methods: {
label(option) {
return `${option.distillery_name}`
},
addGin() {
axios.post('http://localhost:4000/api/v1/gins', {
gin_name: this.gin_name, description: this.description, distillery_id: this.distillery_id, abv: this.abv, snippet: this.snippet
})
.then((response) => {})
console.log()
},
getDistilleries(req) {
axios.get('/api/v1/distilleries')
.then((res) => {
this.options = res.data
})
.catch((error) => {
console.log(error)
})
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
</style>
基于控制台,我怀疑这是一个 rails 问题而不是 vue,但允许的参数对我来说看起来不错。
有什么建议还有什么问题吗?