为什么选择的值在 v-autocomplete 中消失了?
why selected value get disappeared in the v-autocomplete?
selected 值在 v-autocomplete 中消失了。我为此使用了 vuetify v-autocomplete 组件。一旦我 select 一个值,然后当我单击另一个组件或当我继续 selected 值消失的过程时。
<v-autocomplete
:search-input.sync="search"
append-icon="mdi-chevron-down"
v-model="selectedCode"
item-text="name"
item-value="code"
class="my-input"
solo
:items="items"
label="select"
>
<template v-slot:no-data>
<v-list-item>
<v-list-item-content>
<v-list-item-title> Type to filter</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-autocomplete>
data() {
return {
search: null
};
},
watch: {
search(val) {
this.festchData({
search: val
});
}
},
在这种情况下,我能够通过检查 watch()
.
中的几个值来解决这个问题
<v-autocomplete
return-object
:loading="isloading"
clearable
append-icon="mdi-chevron-down"
v-model.lazy="trans.code"
solo
:search-input.sync="search"
class="transaction-input"
:items="merchantList"
:disabled="displayText
"
item-text="name"
item-value="code"
:label="displayText"
:rules="[rules.required]"
>
</v-autocomplete>
watch: {
search(val) {
// if the search value is empty
if (val === undefined || val === null || val.length === 0) {
// make dataList empty
this.makeDataListEmpty();
this.isloading = false;
return;
}
// Items have already been loaded
if (this.dataList.length > 0) return;
// Items have already been requested
if (this.isloading) return;
this.isloading = true;
Promise.all([this.fetchData(val)]).finally(() => {
this.isloading = false;
});
}
},
手表正在监听动作,每次执行动作时它都会被触发。所以我们需要检查我们是否必须在特定时间过滤数据。
selected 值在 v-autocomplete 中消失了。我为此使用了 vuetify v-autocomplete 组件。一旦我 select 一个值,然后当我单击另一个组件或当我继续 selected 值消失的过程时。
<v-autocomplete
:search-input.sync="search"
append-icon="mdi-chevron-down"
v-model="selectedCode"
item-text="name"
item-value="code"
class="my-input"
solo
:items="items"
label="select"
>
<template v-slot:no-data>
<v-list-item>
<v-list-item-content>
<v-list-item-title> Type to filter</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-autocomplete>
data() {
return {
search: null
};
},
watch: {
search(val) {
this.festchData({
search: val
});
}
},
在这种情况下,我能够通过检查 watch()
.
<v-autocomplete
return-object
:loading="isloading"
clearable
append-icon="mdi-chevron-down"
v-model.lazy="trans.code"
solo
:search-input.sync="search"
class="transaction-input"
:items="merchantList"
:disabled="displayText
"
item-text="name"
item-value="code"
:label="displayText"
:rules="[rules.required]"
>
</v-autocomplete>
watch: {
search(val) {
// if the search value is empty
if (val === undefined || val === null || val.length === 0) {
// make dataList empty
this.makeDataListEmpty();
this.isloading = false;
return;
}
// Items have already been loaded
if (this.dataList.length > 0) return;
// Items have already been requested
if (this.isloading) return;
this.isloading = true;
Promise.all([this.fetchData(val)]).finally(() => {
this.isloading = false;
});
}
},
手表正在监听动作,每次执行动作时它都会被触发。所以我们需要检查我们是否必须在特定时间过滤数据。