Я пытаюсь реализовать виртуализацию в раскрывающемся списке, используя Vue.js и Kendo-UI. Я успешно внедрил виртуализацию, но мне трудно понять важность ValueMapper. Это означает, что параметры Dropdown правильно загружаются в DropdownList, когда пользователь выполняет прокрутку вниз, но проблема возникает, когда пользователь делает какой-либо выбор в раскрывающемся списке.
Когда пользователь выбирает любое значение из выпадающего списка, я вижу эту ошибку в консоли:
ValueMapper не предоставляется во время установки значения
Я прочитал документы и пришел к выводу, что реализация преобразователя значений требуется только тогда, когда требуется предварительно выбрать опцию раскрывающегося списка (подробное объяснение см. this ).
Но я получаю вышеупомянутую ошибку, даже когда я выбираю выпадающий вариант, который уже был загружен. Должно быть что-то, чего я не понял в valuemappers.
Кроме того, я использую опрятный ORM в бэкэнде, который не поддерживает IQueryable, и поэтому я написал собственный SQL для получения выгружаемых данных.
Вот мой код Vue:
<template>
<div v-show="visibility=='true'">
<label v-html="label">{{label}}</label>
<kendo-datasource
ref="remoteDatasource"
:transport-read-url="getRequestUrl"
transport-read-type="GET"
transport-read-data-type="JSON"
page-size="20"
schema-data="Data"
schema-total="Total"
server-paging="true"
></kendo-datasource>
<kendo-dropdownlist
ref="dropdownlist"
v-model="cntrlValue"
height="130"
virtual-item-height="26"
:virtual-value-mapper="valueMapper"
data-source-ref="remoteDatasource"
data-text-field="dropdownText"
data-value-field="dropdownValue"
option-label="Select here..."
@close="onSelect"
></kendo-dropdownlist>
</div>
</template>
<script scoped>
import service from "somepath";
export default {
name: "FormGroupSelect",
props: {
id: {
default: "kendo-Dropdown",
type: String
},
name: {
type: String
},
label: String,
visibility: String,
dropdownKey: String
},
data() {
return {
cntrlValue: this.value
};
},
watch: {
value: function(newVal) {
this.cntrlValue = newVal;
}
},
methods: {
onSelect: function() {
this.$emit("Select", this.cntrlValue);
},
getRequestUrl: function() {
return service.getDropdownOptionsRequestUrl(this.dropdownKey);
}
}
};
</script>
Итак, я должен реализовать отображение значений, даже если я не хочу, чтобы мой пользователь мог выбрать значение, которое еще не было загружено в раскрывающемся списке? И если да, то каков наилучший способ реализовать это, не обременяя сервер, прочитав все возможные значения и затем выполнив поиск индексов (потому что именно так это делается в примере с документами).