Vue-multiselect: Display placeholder when option is null, with two dropdowns

[GMounir]

Hello, Thank you for this stunning component.
i'm using two dropdowns with vuex, every dropdown as component.
when i select the parent dropdown i grap all the options to the child dropdown using store.
but when i change the parent dropdown with new values and set the child dropdown options to null and selected option also to null in the store the placeholder not return to default, is stay displaying the old option.
this is not a good because the user not know if the dropdown is updated or not

[OliverGrimsley]

Post your store, mutations and vue-multiselect code so I can see and I might be able to help. But, be aware of this and also make sure you are not using v-model - I am going through something similar (I think, I cannot exactly tell what you are doing). Your issue is most likely a vuex issue. In my component, I have an Action in the store that sets the array value to zero - and vue-multiselect clears the dropdown fine - so if I see your code I might be able to help.

[GMounir]

Thank you for your help :).
Store:

domains: [],
domain: null,
services: [],
service: null

Mutations:

export const setDomains = (state, domains) =>
{
    state.domains = domains
}

export const updateDomain = (state, domain) => {
    state.domain = domain
}

export const updateServices = (state) =>
{   
    state.services = state.domain.services.data
}

export const updateService = (state, service) => {
    state.service = service
}

export const deleteService = (state) => {
    state.service = null
}

Parent Vue-multiselect 1:

<template lang="pug">
    .form-group
        multiselect(
            :domain="domain",
            :options="domains",
            placeholder="Select Domain"
            label="name",
            track-by="id",
            :allow-empty="false",
            :hide-selected="true",
            :show-labels="false",
            @input="changed"
        )

</template>

Child Vue-multiselect 2:

<template lang='pug'>
    .form-group
        multiselect(
               :service="service",
               :options="services",
                placeholder="Select a service"
                label="name",
                track-by="id",
                :allow-empty="false",
                :disabled="isEmpty"
            :hide-selected="true",
            :show-labels="false",
             @input="changed"
          )

</template>

When i updated the parent dropdown i set selected child to null in the store.

[OliverGrimsley]

Add: :searchable="false" in the props. Also, I am not sure what :domain and :service are (I think you may need to use :value there), in my props I do this:

<multiselect
            :value="docketActionTypeSelected"
            :options="getDocketActionTypes"
            :searchable="false"
            label="name"
            track-by="id"
            @input="updateDocketActionTypeSelected"
></multiselect>

In my component I then call: this.updateDocketActionTypeSelected(0); which simply sets the array to empty.

[GMounir]

Thank you so much my hero, it's fixed by changed :service to :value, i was stupid.

[shentao]

Thank you @OliverGrimsley for solving the issue! :)