Как подключить и использовать внешний JS скрипт Choices.js в Vue.js компонент?

Question

[Maксим Волков]

При создании Vue компонента – пошагового оформления заказа интернет магазина необходимо подключить внешний скрипт Choices.js - с возможностью поиска по полю select option.
Необходимо сделать удобный выбор региона заказа, с поиском по регионам. В документации интеграции скрипта с Vue.js не описано.


Данный скрипт использовал многократно, на при попытки использовать совестно с Vue.js периодически возникают ошибки, полагаю связанные с асинхронным получение данных сервера.
Если скрипт отключить, ошибок нет.

В моем случае, внешний Choices.js – скрипт в компоненте Vue.js подключен так:

<template>
	//......    

	<select class="js-example-basic-single" name="region" v-model="region">
		<option disabled>Выберете регион</option>
		<option v-for="regionItem in regions" :key="regionItem.value" :value="regionItem.value" :selected="regionItem.value == region">{{regionItem.name}}</option>
	</select>
	
	//......  
          
</template>

<script>
import Choices from 'choices.js';

export default {
    name: "OrderRegion",
    
    mounted() {
      new Choices('.js-example-basic-single');
    }
}
</script>

<style scoped>
</style>

Прошу совета:

• Как правильно подключить внешний скрипт в Vue.js компонент?
  
• Есть ли у кого-нибудь опыт совместного использования Choices. с Vue.js?
  
• Есть какие- либо альтернативы, для Vue с возможностью поиска по полю формы select option?
  

Comments

[Александр]

https://laracasts.com/discuss/channels/vue/choices... пробовали?

Answer 1

[0xD34F]

<div v-once>
  <select ref="select" v-model="region"></select>
</div>

mounted() {
  const choices = new Choices(this.$refs.select);
  this.$watch(
    'regions',
    val => choices.setChoices(val, 'value', 'name', true),
    { immediate: true }
  );
  this.$on('hook:beforeDestroy', () => choices.destroy());
},

Comments

[Maксим Волков]

Благодарю! Работает.
Только на

this.$on('hook:beforeDestroy', () => choices.destroy());

ругается, ошибка в консоле типа:

OrderRegion.vue:90 Uncaught (in promise) TypeError: this.$on is not a function

[0xD34F]

Maксим Волков, третья версия vue? Да, метод был удалён. Так что экземпляр chioces придётся сделать свойством компонента, чтобы можно было добраться до него в beforeUnmount:

mounted() {
  this.choices = new Choices(this.$refs.select);
  this.$watch(
    'regions',
    val => this.choices.setChoices(val, 'value', 'name', true),
    { immediate: true }
  );
},
beforeUnmount() {
  this.choices.destroy();
},

Или можно переписать компонент с использованием composition api, чтобы весь код, предназначенный для работы с choices, был в одном месте.

[Maксим Волков]

Отлично! Благодарю!
Осталось разобраться как добавлять атрибут 'selected' элементам, если value соответствует значению свойства компонента this.region.

Танцую с бубном, пытаюсь решить задачу.

[0xD34F]

Maксим Волков, какой ещё selected, зачем? Не надо никаких selected. Во-первых, при использовании v-model атрибут selected игнорируется. Во-вторых, никаких option'ов у вас нет, choices прячет select и создаёт вместо него другие элементы.

[Maксим Волков]

0xD34F,

какой ещё selected, зачем?

Ну для сохранения значения ранее выбранного региона или региона заданного по умолчанию.
К примеру:
При старте оформления заказа, на шаге выбора региона, пользователь уже видит один из наиболее вероятных регионов, который задан по умолчанию.
Если заданный по умолчанию регион не устраивает - выбирает выбирает свой.

[0xD34F]

Maксим Волков, для этого у вас есть свойство компонента, которое в v-model используется.