Блог

Я динамически извлекаю параметры данных из API, когда мышь пользователя вводит элемент ввода HTML select. В mouseenter случае getCodeStatusCodes , если метод запущен, и доступны опции для выбора. Это прекрасно работает. Однако проблема заключается в том, что поле ввода HTML select не отображает никаких заданных данных ДО события ввода мыши. Только после того, как произойдет событие ввода с помощью мыши, пользователь увидит предварительно заданное значение поля ввода.

При загрузке страницы поле выглядит следующим образом:

Как я могу это сделать, чтобы при загрузке страницы поле выглядело так («Официально присвоено» — это заданное значение из базы данных):

Вот код:

шаблон:

 lt;select  :id="`numericCodeStatus_${division.itemIdentifier_PK}_input`"  v-model="formValues.codeStatus"  @mouseenter="getCodeStatusCodes"  gt;  lt;option  v-for="code in codeStatusCodeOptions"  :value="code.status"  :key="code.status"  gt;  {{ code.name }}  lt;/optiongt;  lt;/selectgt;  

скрипт:

   data() {  return {  codeStatusCodeOptions: [],  formValues: {  codeStatus: this.division.codeStatus  ...snip...  }  }  },  methods: {  async getCodeStatusCodes() {  if (this.codeStatusCodeOptions.length) return // exit if codestatus options already exists  const response = (await APIService.getCodeStatusCodes()).data.data  this.codeStatusCodeOptions = response  }  }  

Мой вариант использования для приведенной выше логики заключается в том, что у меня очень большая форма, которая выполняет множество сетевых запросов, и с помощью события mouseenter я могу лениво загружать параметры данных меню выбора, когда мышь пользователя входит в поле, но мне все равно нужно показать предыдущие значения.