Question

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

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

我可以在下拉菜单中显示选项，并且可以提交其他值，但是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模型已设置为单个distillery对象。我相信@UdAY在评论中透露了这一点。因此，您的POST数据可以更改为：

                                                     id
title: 'foo'                                       
body: 'bar'                                        
userId:1                                           

---------------------------------------------------  --
                                                    101

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似乎更具可读性。

希望它会有所帮助:)

Vue Multiselect未提交ID值（Rails API）

2 个答案: