CODEWITHSUNDEEP
javascriptvue.js
OLA
OLA

Reputation: 981

Retrieve selected values from multi-select box in vue js

I am having a hard time retrieving values from a multi-select box in Vue. After the user has selected any number of values, I want to retrieve the values and submit to a data source. No luck so far. Here's an excerpt of my code below. 

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

Any help would be much appreciated. Here's the actual pen

Upvotes: 0

Views: 167

Answers (2)

Mahamudul Hasan
Mahamudul Hasan

Reputation: 2823

Just you have assigned drop down data wrongly , Need to change like below:

Little change in template:

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

and saveItem() method like below:

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

Upvotes: 2

sebasaenz
sebasaenz

Reputation: 1966

The problem is that you are not passing anything to the saveItem function, so no program was being sent.

You just have to replace saveItem for saveItem(program) and that should do the trick.

Upvotes: 1

Related Questions