Issue with Vue Multiselect failing to send the ID value when communicating with Rails API

My current setup involves a Rails API backend and VueJS integrated through Nuxt on the frontend.

In one of my forms, I am utilizing vue-multiselect for a select input. The options in the select dropdown are values from a different table, where I aim to display the name field but submit the ID.

Although I can successfully display the options in the dropdown and submit other form data, it seems that submitting the ID is causing issues.

The Rails console indicates an error regarding `distillery_id` not being accepted as a permitted parameter, despite having properly set this up in the controller.

Started POST "/api/v1/gins" for ::1 at 2019-02-01 13:25:38 +0000
Processing by Api::V1::GinController#create as HTML
  Parameters: {"gin_name"=>"distillery_id", "description"=>"distillery_id should be submitted", "distillery_id"=>{"id"=>3, "distillery_name"=>"Gordon's"...}
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">
    ...
  </form>
</div>

This issue appears to be originating from Rails rather than Vue based on the console feedback. Any thoughts on what might be causing this discrepancy?

Answer №1

Warning: Please proceed with caution as this solution has not been tested thoroughly. Upon reviewing the documentation for VueMultiselect and examining your Vue component, it seems that the issue lies in setting the distillery_id v-model to a single object instead of just the id. @UdAY also pointed this out in the comments. To fix this, you can adjust your POST data as follows:

addGin() {
  axios.post('http://localhost:4000/api/v1/gins', {
    gin_name: this.gin_name,
    description: this.description,
    distillery_id: this.distillery_id.id, // Ensure only the id property is included
    abv: this.abv,
    snippet: this.snippet
  })

Answer №2

Have you attempted using a filter method to extract the desired values?

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

I'm not entirely sure if this approach will work, so please review the code carefully before implementation.

Alternatively, you can debug the code to identify how to retrieve the ID:

 addGin(argument1, argument2, argument3) {
  debugger; // The code execution will halt here for inspection and modification!
  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)
},

You may consider switching from multiselect to vue-select component, as it offers more clear documentation in the docs section.

Hopefully, these suggestions prove helpful :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to send a JSON response from a Symfony2 controller?

I am utilizing jQuery to modify my form, which is created using Symfony. The form is displayed within a jQuery dialog and then submitted. Data is successfully stored in the database. However, I am unsure if I need to send some JSON back to jQuery. I am ...

What is the best way to create a series of synchronous HTTP requests using $http in AngularJS?

I am facing the challenge of uploading a list of video objects with different attributes and links. Currently, I have set up a loop to go through each object in the list and upload the videos one by one since the service I am using does not support multipl ...

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

The module specifier "vee-validate" could not be resolved. Please ensure that relative references begin with either "/", "./", or "../"

In our development environment for the Django project, we do not utilize npm. However, we incorporate VueJS in templates and have successfully integrated vee-validate. I am currently facing a challenge with overriding error messages without importing, whic ...

Improving Multilingual Support in Vue using i18n for String Arrays in v-for Loops

I am diving into the world of vuejs and working on a project that involves multi-language support, specifically German and English. However, I've encountered an issue with looping through a list of String Arrays and translating them. Here's what ...

Adding the `push()` method to an object at runtime in Typescript/Javascript

I'm encountering an issue when attempting to utilize the push() method to add a property to an object named counterType. The error message I receive is as follows: Uncaught TypeError: Cannot read property 'push' of undefined The goal is ...

What is the best way to retrieve the selected value from a constantly changing table by the user?

I have a challenge with a dynamic table where I need to click on the link labeled location A and navigate to another php page. On this new page, I want to retrieve specific details related to location A from the database. Despite trying different methods, ...

Generating dynamic tables using JQuery is not possible

This script is intended to generate a table and convert it into a canvas. Clicking on a cell should change its color to the selected color from the color picker input is retrieved from text boxes and the color picker, and executed upon submitting I need t ...

Angular 2 input delay feature

I'm currently working on an application where I need to send an event after input debounce. Here's what I have tried so far: @ViewChild('messageInput') messageInput: ElementRef; private inputTimeOutObservable: any; setTypi ...

Tips on expanding the space between words in a scrolling "marquee" text

Looking for some assistance with my jQuery project involving a horizontal scrolling "marquee" text. I am currently trying to adjust the size of the gap between the phrases in the marquee. Here is an example with the phrase "HEY THERE". jQuery(document ...

Is feedback being generated during a PHP function? (Possibly through AJAX?)

Greetings fellow developers! I've successfully created a php script that saves URLs submitted through a form to a zipped archive. However, there's a slight inconvenience when a user submits the form with a large number of URLs, as they have ...

Discover the concealed_elem annotations through the power of JavaScript

As I work on my new website, I am struggling with narrowing down the web code. I came across a solution that seems fitting for what I need, but unfortunately, I can't seem to make it work: I attempted the non-jQuery solution, however, I must be missi ...

Design a captivating Profile Picture form using HTML and CSS styling

In my form, I am looking to include a user's Profile picture which should be displayed in either a circular or rectangular shape. Initially, the image area will show a black background or a placeholder image. When the user clicks on this area, they sh ...

How to use the filter() method to filter an array of objects based on a nested array within each object

The following data presents a list of products along with their inventory information: const data = [ { id: 1, title: "Product Red", inventoryItem: { inventoryLevels: { edges: [{ node: { location: { name: "Warehou ...

Quick tip: Showing a default Font Awesome icon in Vue, Angular, or React when the desired icon is not found

Utilizing the <fa-icon> fontawesome component, I implement the library approach as follows: export const faIconsDefinitionsToRegister: IconDefinition[] = [ ...proRegularFaIcons, ...proSolidFaIcons, ...proLightFaIcons, ...proThinFaIcons, ... ...

Incorporate a stylish gradient background into react-chartjs-2

I am currently working on adding a gradient background with some transparency to a radar graph within a react component. So far, I have only found solutions that involve referencing a chartjs canvas in an html file, but none for implementing it directly in ...

Access to data retrieval was restricted by CORS policies on my Node.js/Express REST API server

I am currently running a localhost node/express server that is designed to accept any post request with a body and then return the same body along with a message. To enable Cross-Origin Resource Sharing (CORS), I have integrated the cors node package into ...

Numerous Items

I have a strange object that I would like to transform into an object containing multiple nested objects. The current object has the following structure: { 'test.txt': "This is a test\r\n\r\nI hope it'll work", &apo ...

Issue [ERR_MODULE_NOT_FOUND]: The module 'buildapp' could not be located within buildserver.js

I am currently working on a node project using typescript. The project's structure is organized in the following way: --src |-- server.ts |-- app.ts --build |-- server.js |-- app.js In server.ts: import { app } from &q ...

Can you clarify the distinctions between @nuxtjs/google-gtag, @nuxtjs/gtm, @nuxtjs/google-analytics, and vue-gtag, and which one would be most suitable for GA4

I'm diving into the world of analytics and feeling quite overwhelmed by it all. My goal is to implement Google Analytics 4 in my nuxt SSR webapp, but I'm struggling with the abundance of options available. I came across a dilemma on nuxtjs/goog ...