How to extract specific options from a Vue.js multi-select dropdown

Question

How to extract specific options from a Vue.js multi-select dropdown

I've been struggling to retrieve values from a multi-select box using Vue. My goal is to capture the selected values and submit them to a data source, but I haven't had any success so far. Below is a snippet of my code:

<div id="app">
   <select multiple v-bind:data-id="program.id" :disabled="!program.editable" v-model="program.dropDowns">
       <option>Microsoft</option>
       <option>IBM</option>
       <option>Google</option>
       <option>Apple</option>
   </select>
</div>

getPrograms: function() {
      axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then((response) => {
          this.programs = response.data.map(row => ({
            ...row,
            dateFormatted: toDDMMYY(row.Date),
            editable: false,
            dropDowns: ["Apple","Google"]
          }));
        console.log(this.programs)
        })
        .catch(function(error) {
          console.log(error);
        });
}

I would greatly appreciate any assistance with this issue. You can also view the codepen for more context.

javascript vue.js

Answer 1

Answer №1

It appears that the drop-down data has been assigned incorrectly. To correct this issue, please make the following changes:

Modify the template as follows:

<button v-else @click="saveItem(program)">save</button>

Adjust the saveItem() method to look like this:

saveItem (program) {
     program.isReadOnly = true
     program.editable = false
     console.log(program)
     alert(program.dropDowns)
    }

Answer 2

It appears that the drop-down data has been assigned incorrectly. To correct this issue, please make the following changes:

Modify the template as follows:

<button v-else @click="saveItem(program)">save</button>

Adjust the saveItem() method to look like this:

saveItem (program) {
     program.isReadOnly = true
     program.editable = false
     console.log(program)
     alert(program.dropDowns)
    }

Answer 3

Answer №2

The issue lies in the fact that nothing is being passed to the saveItem function, resulting in no data being sent for program.

To resolve this, simply substitute saveItem with saveItem(program) and that should solve the problem.

Answer 4

The issue lies in the fact that nothing is being passed to the saveItem function, resulting in no data being sent for program.

To resolve this, simply substitute saveItem with saveItem(program) and that should solve the problem.

How to extract specific options from a Vue.js multi-select dropdown

Answer №1

Answer №2

Similar questions

How to resolve the error of "Objects are not valid as a React child" in NextJs when encountering an object with keys {children}

Effortless gliding towards the left

Modal does not display the plothover tooltip

I attempted to log the elements of my submit button form, but unfortunately nothing is appearing in the browser console

Vue alert: Render function generation failed due to SyntaxError: String found unexpectedly in

Use Jquery to insert HTML content after every third iteration of a for loop

Notify the entity

Obtaining a value from HTML and passing it to another component in Angular

You do not have permission to access the restricted URI, error code: 1012

A step-by-step guide on integrating HTML form input with an API object array

Extract the "_id" value from the array in the v-for loop and then store and reuse it in the data object // using vue-cli

Add content or HTML to a page without changing the structure of the document

The issue arises when the cache code in jQuery Ajax interferes with the callback function, causing it to

What is the best way to retrieve the title element from a loaded iframe?

Update the state when a button is clicked and send a request using Axios

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

The requested style from ' was denied due to its MIME type ('text/html') not being compatible with supported stylesheet MIME types, and strict MIME checking is enforced

What can be done to address the issue of v-model select option onchange displaying the previously selected value or becoming stuck on a static value rather than updating

Utilizing checkboxes to narrow down JSON data results through jQuery/AJAX filtering

What is the best way to handle returning a promise when outside of the scope?