javascript - Vue Multiselect 未提交 ID 值(Rails API)

Question

我的应用程序是 Rails API 后端和通过 Nuxt 前端的 VueJS。

我有一个表单，其中一个输入是选择，我正在使用 vue-multiselect 。选择选项是来自不同表的值，我想在其中显示名称字段，但提交 ID。

我能够正常显示下拉列表中的选项，并且我还在表单中提交其他值，但 ID 不起作用。

Rails 控制台显示 distillery_id 不是允许的参数的错误，尽管我确实在 Controller 中设置了此参数。

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

new.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 问题，但允许的参数对我来说看起来不错。

还有什么建议吗？还有什么可能出问题的吗？

Answer 1

注意，这未经测试。但是，快速查看 VueMultiselect 的文档和 Vue 组件后，您的 distillery_id v-model 似乎被设置为单个酒厂对象。我相信 @UdAY 在评论中透露了这一点。因此您的 POST 数据可以更改为:

addGin() {
  axios.post('http://localhost:4000/api/v1/gins', {
    gin_name: this.gin_name,
    description: this.description,
    distillery_id: this.distillery_id.id, //this.distillery_id is being set as an object and you just need the id prop here
    abv: this.abv, snippet: this.snippet
  })