Vue Multiselect 未提交 ID 值（Rails API）

Question

我的应用是 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
...

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 似乎被设置为单个 distillery 对象。我相信@UdAY 在 cmets 中透露了这一点。因此您的 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
  })

Answer 2

您是否尝试过使用filter 来获得好的值？

 addGin() {
  let myId = options.filter(o => distillery_id.some(d => d.distillery_id === o.distillery_id));
  axios.post('http://localhost:4000/api/v1/gins', {
    gin_name: this.gin_name, 
    description: this.description, 
    distillery_id: myId, 
    abv: this.abv, 
    snippet: this.snippet
  }).then(console.log)
},

我不知道这行得通，使用前检查代码。

另一种方法是调试该行中的代码并检查如何获取 id：

 addGin(argument1, argument2, argument3) {
  debugger; // The code will stop here, check this object to get the data and change the code!
  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(console.log)
},

我建议将多选更改为vue-select docs 似乎更具可读性。

希望对你有帮助:)