在使用vue-treeselect在其他下拉列表中选择项后，清除下拉列表中的选定项

Question

我正在编写关于泰国自动选择省份的代码，当我在省下拉列表中选择A省时，区域下拉列表将在A省变为值，而当我更改为省B省下拉列表时，区域下拉列表中的值已经更改为B省的区域，但区域下拉列表的UI 仍然显示了A省的区域。

我研究了几天的选树博士，现在真的找不到解决的办法。

这是UI现在

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

Answer 1

VueTreeselect的正式文档提到，select事件是在选择选项后发出的。与值更新没有依赖关系。我更希望您使用input事件而不是select。由于文档状态，input事件将在值更改后发出。因此，在此方法中，您将获得第一个选择的更新值。

工作部件

​

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>

​