Clearing a selected item in dropdown after selecting item in other dropdown with vue-treeselect-CodePudding

I'm coding about auto select provinces in Thailand, When I choose province A in province dropdown the district dropdown will change to value in province A, and when I change to province B in province dropdown value in district dropdown has changed to district in province B already but the UI of district dropdown still shows district in province A.

I have researched treeselect docs and tried for several days now, and I really can't find a solution :-(

This is UI rightnow

<treeselect 
    id="province-selected"
    v-model="state.provinceSelected" 
    :options="provinceArr" 
    placeholder="กรุณาเลือกจังหวัด" 
    noResultsText="ไม่พบข้อมูล"
    data-test="province-input"
    :
    :normalizer="normalizerProvince"
    @select="getDistrict"
    zIndex="20000"
    :clearable="false"
    :allowClearingDisabled="true"
/>

CodePudding user response：

The official documentation of VueTreeselect mentions, the select event is Emitted after selecting an option. It has no dependency with the value update. I prefer you to use input event instead of select. Because the documentation states, the input event will be Emitted after value changes. So inside this method you will get the updated value for the first select.

Working Fiddle

Vue.component('treeselect', VueTreeselect.Treeselect)
new Vue({
    el: '#app',
    data: {
        provinceArr: [
            { id: 1, label: 'Province 1', districtArr: [
                { id: 10, label: 'District 01' },
                { id: 11, label: 'District 02' },
                { id: 12, label: 'District 03' },
                { id: 13, label: 'District 04' },
            ]},
            { id: 2, label: 'Province 2', districtArr: [
                { id: 20, label: 'District 21' },
                { id: 21, label: 'District 22' },
                { id: 22, label: 'District 23' },
                { id: 23, label: 'District 24' },
            ]},
            { id: 3, label: 'Province 3', districtArr: [
                { id: 30, label: 'District 31' },
                { id: 31, label: 'District 32' },
                { id: 32, label: 'District 33' },
                { id: 33, label: 'District 34' },
            ] },
            { id: 4, label: 'Province 4', districtArr: [
                { id: 40, label: 'District 41' },
                { id: 41, label: 'District 42' },
                { id: 42, label: 'District 43' },
                { id: 43, label: 'District 44' },
            ] },
            { id: 5, label: 'Province 5', districtArr: [
                { id: 50, label: 'District 51' },
                { id: 51, label: 'District 52' },
                { id: 52, label: 'District 53' },
                { id: 53, label: 'District 54' },
            ] },
            { id: 6, label: 'Province 6', districtArr: [
                { id: 60, label: 'District 61' },
                { id: 61, label: 'District 62' },
                { id: 72, label: 'District 73' },
                { id: 73, label: 'District 74' },
            ] },
        ],
        districtArr: [],
        state: {
            provinceSelected: null,
            districtSelected: null,
        },
    },
    methods: {
        getDistrict: function(node, instanceId) {
            console.log(this.state.provinceSelected, node, instanceId);
            // Some logic to populate districts
            this.districtArr = this.provinceArr.find(item => item.id === this.state.provinceSelected).districtArr;
        },
        onDistrictSelected: function(node, instanceId) {
            console.log(this.state.districtSelected)
        }
    }
})

<!-- include Vue 2.x -->
<script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
<div id="app">
    <div>
        <p>Province</p>
        <treeselect 
            id="province-selected"
            v-model="state.provinceSelected" 
            :options="provinceArr" 
            placeholder="กรุณาเลือกจังหวัด" 
            noResultsText="ไม่พบข้อมูล"
            data-test="province-input"
            @input="getDistrict"
            zIndex="20000"
            :clearable="false"
            :allowClearingDisabled="true"
        />
    </div>
    <div>
        <p>District</p>
        <treeselect 
            id="district-selected"
            v-model="state.districtSelected" 
            :options="districtArr" 
            placeholder="กรุณาเลือกจังหวัด" 
            noResultsText="ไม่พบข้อมูล"
            data-test="district-input"
            @input="onDistrictSelected"
            zIndex="20000"
            :clearable="false"
            :allowClearingDisabled="true"
        />
    </div>
</div>