How to bind multiple values for select


In the following fiddle, I try to bind a list of values for a multi select:

The template looks like this:

            <select multiple :value="selectedOptions">
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="c">C</option>

And the data value of selectedOptions is ['a','b']. But when running the fiddle nothing gets selected. Alternatively if I just set it to ['a'], then it works.

How do I bind multiple values?


Try to ignore :value, don’t use it.

<select multiple>
              <option value="a">A</option>
              <option value="b">B</option>
              <option value="c">C</option>


What do you mean ignore it? Are you trying to say something that is not apparent in your reply?


Not define :value just omit it.


Sorry, it is more complex. I did not look at jsfiddle.


I have wrote in this way, try here


Thanks very much @almazk. Your solution does indeed work. It would be nice if framework7’s smart select vue bindings more genuinely implement a simple v-model without this extra supplemental code.


By the way, if you use numbers instead of strings, you could use
newValues.push(selectedOptions[Index]['_value']) - underscore at the beginning of value
The difference of this is it preserves the type of the given value.


It was mentioned before why it is not using in F7 by creator @ Why is v-model not used?


Thanks @almazk. One thing missing from your approach is that updating the bound selectedOptions does not update the list item automatically, unless the list is re-rendered by leaving the page and coming back to it. See the following fiddle, where I update selectedOptions in a setTimeout, and list item does not update:


hi @jacobg,
Thats bcs its bind to the “change” event of the select UpdateValues


so will only update values if you change the select selection.
you can add ref=‘mySelect’ and set the selected items, also trigger change

 <select multiple @change="UpdateValues" ref='mySelect'>
setTimeout(() => {
  this.selectedOptions = []
  this.$refs.mySelect.selectedOptions = []
  this.$nextTick(() => { this.Dom7(this.$refs.mySelect).change() })
}, 3000)


@pvtallulah, your solution is what I have been waiting for a long time. I use smart select in a little different scheme. I created my own component that relies on it. And there already transferring(say it passing) via v-model.


@pvtallulah Thanks very much. I wish framework7 would be able to simply use a v-model that would connect all the components together.