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

Question

Эмир

vue

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

У меня возникли проблемы при использовании внешнего скрипта Choices.js совместно с Vue.js при создании компонента для пошагового оформления заказа в интернет-магазине. Скрипт предназначен для добавления функциональности поиска по полю выбора (select option). Я подключил этот скрипт в компоненте Vue.js, но иногда возникают ошибки, связанные с асинхронным получением данных от сервера. Без подключения этого скрипта ошибок не возникает. Как правильно подключить внешний скрипт в компоненте Vue.js? Есть ли у кого-то опыт с использованием Choices.js совместно с Vue.js? Есть ли какие-либо альтернативы для Vue.js с функцией поиска по полю выбора (select option)?

6 ноября 2023 г. 10:19

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для подключения внешнего JS скрипта в компоненте Vue.js вы можете воспользоваться следующим подходом:

1. Скачайте скрипт Choices.js и сохраните его в каталоге вашего проекта, например, в папке `public/js`.

2. Используйте тэг `script` в разделе `mounted()` вашего компонента Vue.js, чтобы динамически подключить скрипт:

```javascript
mounted() {
  const script = document.createElement('script');
  script.src = '/js/choices.min.js';
  document.body.appendChild(script);
}
```

3. Импортируйте экземпляр Choices.js в вашем компоненте для его использования:

```javascript
import Choices from 'choices.js';

export default {
  mounted() {
    new Choices(this.$refs.selectInput);
  }
}
```

4. В HTML-разметке вашего компонента создайте поле выбора (select) и добавьте ссылку на него с помощью атрибута `ref`:

```html
<template>
  <div>
    <select ref="selectInput">
      <!-- options -->
    </select>
  </div>
</template>
```

Таким образом, скрипт Choices.js будет динамически подключен при монтировании компонента, после чего вы можете использовать его функциональность в вашем поле выбора.

Относительно проблем с асинхронным получением данных от сервера, вы можете попробовать подключить скрипт после получения данных:

```javascript
// в вашем методе, где получаете данные
fetchData() {
  // получение данных

  // подключение скрипта после получения данных
  const script = document.createElement('script');
  script.src = '/js/choices.min.js';
  document.body.appendChild(script);
}
```

Если у вас остаются проблемы с асинхронной загрузкой скрипта, вы также можете попробовать использовать директиву `v-async-script`, доступную как отдельный пакет, например, `vue-async-script`.

Касательно альтернатив для Vue.js с функцией поиска по полю выбора (select option), вы можете рассмотреть следующие пакеты:

- `vue-select`: https://vue-select.org/
- `vue-multiselect`: https://vue-multiselect.js.org/
- `vue-dropdowns`: https://www.vue-dropdowns.com/

Все они предоставляют функциональность поиска и легко интегрируются с Vue.js.

Answer 2


  
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());
},