Initial value binding to select multiple in Vuejs not working

[patrickvuarnoz]

I'm having a strange issue when trying to bind a value to a <wa-select multiple>. What I'm doing is this:

<wa-select v-bind:value.prop="selection" multiple>
  <wa-option v-for="option in options" v-bind:key="option.id" v-bind:value="option.id.toString()">{{ option.name }}</wa-option>
</wa-select>

What I observe is that when I initialize the selection after my Vue component has mounted, then the values of the selection are not displayed in the <wa-select>. If afterwards the selection changes, then the <wa-select> immediately shows all the selected options.

When I do the same with an <sl-select> like in the following code, then it works and the selection is displayed after the initialization:

<sl-select v-bind:value.prop="selection" multiple>
  <sl-option v-for="option in options" v-bind:key="option.id" v-bind:value="option.id.toString()">{{ option.name }}</sl-option>
</sl-select>

Also, when I explicitly use v-bind:value.attr on the <wa-select> and set the values as space-delimited strings, then it works too (this also works with sl-select):

<wa-select v-bind:value.attr="selection.join(' ')" multiple>
  <wa-option v-for="option in options" v-bind:key="option.id" v-bind:value="option.id.toString()">{{ option.name }}</wa-option>
</wa-select>

I don't understand why there is this difference between Shoelace and Webawesome and whether there is something I'm doing wrong with Webawesome or whether this is a bug.

I tried to create an example demonstrating the problem but I didn't get it to run in Codepen or Vue Playground with the required setup (isCustomElement).

[claviska]

I notice you're binding on the options, but the Shoelace docs for Vue show two-way binding a bit differently:

<!-- This doesn't work -->
<sl-input v-model="name"></sl-input>

<!-- This works, but it's a bit longer -->
<sl-input :value="name" @input="name = $event.target.value"></sl-input>

Unlike the native <select> element, Shoelace and Web Awesome bind the value to the <wa-select> element. Have you tried doing this?

<wa-select :value="name" @input="name = $event.target.value"></wa-select>

For multiple, you'd still need to split the values with a space.

As for why things work differently, it's likely due to the form associated custom element integration we added to Web Awesome to make its form controls first-class citizens via ElementInternals, which wasn't available when Shoelace was created.

[patrickvuarnoz]

Many thanks for your quick response. I'm not binding to the <wa-options>, I only use Vue to create them dynamically. The data binding itself is on the <wa-select> via v-bind:value.prop="selection". What I didn't show in the examples is how I retrieve the changed values. But this is done like this (like proposed by the documentation):

<wa-select v-bind:value.attr="selection.join(' ')" v-on:wa-change="onSelectionChange($event.target.value)" multiple>
  <wa-option v-for="option in options" v-bind:key="option.id" v-bind:value="option.id.toString()">{{ option.name }}</wa-option>
</wa-select>

Does your answer mean that the <wa-select> is longer meant to supports the value being an array? In the documentation on "setting initial values" it mentions this here:

When using multiple, the value attribute uses space-delimited values to select more than one option. Because of this, values cannot contain spaces. If you're accessing the value property through Javascript, it will be an array.

That's also why I assumed that v-bind:value.prop="selection" should work with an array and that $event.target.value would also be an array. And it actually seems to works like that, but just not for the initialization just after the Vue component mounted.