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.

[patrickvuarnoz]

After some further digging I realized what the problem is with Vuejs. It is actually the same for the issue described in #164. What I am doing in both cases is setting the data in the mounted lifecycle hook (because I don't need async loading as the data is already present at the store):

mounted: function () {
  this.value = ['option-1', 'option-2'];
}

This will NOT work. The most likely cause is that the WA component is not yet ready to be called by Javascript, which is what Vuejs does when setting props (setting attributes would work but has other side effects). I played around a bit trying to find the right timing when the WA component is ready and I came up with the following tests from the Vuejs side:

<!-- Template -->
<template>
  <wa-select v-bind:value="value" multiple>
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
    <wa-option value="option-3">Option 3</wa-option>
    <wa-option value="option-4">Option 4</wa-option>
    <wa-option value="option-5">Option 5</wa-option>
    <wa-option value="option-6">Option 6</wa-option>
  </wa-select>
  <pre>value: {{ value }}</pre>
</template>

<!-- Controller -->
<script>
  export default {
    
    data: function () {
      return {
        value: null,
      }
    },
    
    // This does NOT work!
    created: function () {
      this.value = ['option-1', 'option-2'];
    },
    
    // This does NOT work!
    created: function () {
      this.$nextTick(() => {
        this.value = ['option-1', 'option-2'];
      });
    },
    
    // This does NOT work! (equivalent to the above)
    created: async function () {
      await this.$nextTick();
      this.value = ['option-1', 'option-2'];
    },
    
    // This does NOT work!
    created: function () {
      this.value = ['option-1', 'option-2'];
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    
    // This works!
    created: function () {
      setTimeout(() => { this.value = ['option-1', 'option-2'] }, 0);
    },
    
    // This works! (sleep for 0 seconds)
    created: async function () {
      await new Promise(r => setTimeout(r, 0));
      this.value = ['option-1', 'option-2'];
    },
    
    // This does NOT work!
    created: function () {
      this.value = ['option-1', 'option-2'];
      this.$forceUpdate();
    },
    
    // This does NOT work!
    mounted: function () {
      this.value = ['option-1', 'option-2'];
    },
    
    // This works!
    mounted: function () {
      this.$nextTick(() => {
        this.value = ['option-1', 'option-2'];
      });
    },
      
    // This works! (equivalent to the above)
    mounted: async function () {
      await this.$nextTick();
      this.value = ['option-1', 'option-2'];
    },
    
    // This works!
    mounted: function () {
      this.value = ['option-1', 'option-2'];
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    
    // This works!
    mounted: function () {
      setTimeout(() => { this.value = ['option-1', 'option-2'] }, 0);
    },
    
    // This works! (sleep for 0 seconds)
    mounted: async function () {  
      await new Promise(r => setTimeout(r, 0));
      this.value = ['option-1', 'option-2'];
    },
    
    // This does NOT work!
    mounted: function () {
      this.value = ['option-1', 'option-2'];
      this.$forceUpdate();
    },
  }
</script>

So, delaying the setting of the data on the WA component does the trick (even a timeout of 0 does work). The easiest variant is to work with $nextTick() in the mounted hook.

@claviska Can you explain how the lifecycle of the WA components works? When is a component ready to be called by Javascript? And would there technically be an option that the WA components make their properties settable earlier in their lifecycle?

If there is no way that WA can support this better then it would be good if there was a section in the documentation where solutions to this problem are mentioned. Note that if you load data in the mounted hook asynchronously then this problem will not occur.

[LeaVerou]

And would there technically be an option that the WA components make their properties settable earlier in their lifecycle?

If there is no way that WA can support this better then it would be good if there was a section in the documentation where solutions to this problem are mentioned. Note that if you load data in the mounted hook asynchronously then this problem will not occur.

Hi @patrickvuarnoz! Thanks for reminding me about this issue. I believe this is a Lit limitation (the underlying library we use to build our components), but I have some ideas about ways we could work around it.

[claviska]

Can you explain how the lifecycle of the WA components works? When is a component ready to be called by Javascript?

It depends on how you load them. If you use the autoloader, it kicks in after the document loads and when wa-* elements are added dynamically (via Mutation Observer). Then they're fetched via import() and registered, then they perform their first render.

If you use WA through the upcoming npm module, Vite will be able to bundle things in the way Vue expects, so the components will be registered before Vue mounts, avoiding all of these timing issues.