How to bind multiple values for select


#1

In the following fiddle, I try to bind a list of values for a multi select:
https://jsfiddle.net/jacobg/80evk492/

The template looks like this:

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

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?


#2

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

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

#3

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


#4

Not define :value just omit it.


#5

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


#6

I have wrote in this way, try here https://jsfiddle.net/almazk/7x1acebL/16/


#7

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.


#8

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.


#9

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


#10

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:
https://jsfiddle.net/jacobg/sm8Lwf3o/


#11

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

@change="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)

#12

@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.


#13

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