Retrieve selected values from multi-select box in vue js

Question

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

Where is it that you are submitting the data to a datasource? — sebasaenz
– sebasaenz, Commented Nov 21, 2019 at 3:18
I'm submitting to a list. I initially posted relevant code but notified me to trim it. — OLA
– OLA, Commented Nov 22, 2019 at 1:08
Actually, it didn't really work. Edit the company column and select more than one value and click save. It's not captureing the values. codepen.io/isogunro/pen/bGGrWZG?editors=1011 — OLA
– OLA, Commented Nov 22, 2019 at 12:12

Mahamudul Hasan · Accepted Answer · 2019-11-21 03:36:01Z

2

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

edited Nov 21, 2019 at 3:36

answered Nov 21, 2019 at 3:30

Mahamudul Hasan

2,8232 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

OLA Over a year ago

I'm sorry. I thought it was working but that didn't really work. Edit the company column and select more than one value and click save. It's not captureing the values. codepen.io/isogunro/pen/bGGrWZG?editors=1011

Mahamudul Hasan Over a year ago

still it is working, but now you have changed your code, as per your current code, you have to change the saveItem method like : saveItem (program) { program.isReadOnly = true console.log(program) alert("New Value: "+program.company) alert("Previous Value: "+program.company) }

sebasaenz · Accepted Answer · 2019-11-21 03:23:45Z

1

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.

answered Nov 21, 2019 at 3:23

sebasaenz

1,9662 gold badges23 silver badges26 bronze badges

2 Comments

sebasaenz Over a year ago

By the way, the part of the code I'm talking about is not written in your post. You should have all your relevant code inside your post, not just in a codepen.

Kubwimana Adrien Over a year ago

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

Collectives™ on Stack Overflow

Retrieve selected values from multi-select box in vue js

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related