Заполните компонент автозаполнения материализацией переменной vue - PullRequest
Новая
       33

Заполните компонент автозаполнения материализацией переменной vue

0 голосов
/ 27 апреля 2020

Я использую компонент автозаполнения matarialize, и мне нужно установить его данные в массиве, хранящемся в vue. js

       data:{
            param:[]
       },
       mounted(){
            this.init();
            $('input.autocomplete').autocomplete({
                data: {

                },
            });
        },

Как передать функцию jquery переменная param хранится в vue данных? Этот массив заполнен JSON данными, содержащими строки из моей базы данных.

1 Ответ

1 голос
/ 27 апреля 2020

Хорошо, у вас есть ваш массив: 

var countries = ["rome", "london", "new york"];

И нам нужно преобразовать его в объект, чтобы автозаполнение могло использовать его, например: 

data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },

Мы делаем это за три шага:

  1. Создание пустого объекта 

    var data = {};

  2. L oop над массивом стран и создание ключа пара значений для каждого в объекте данных. Обратите внимание, что мы используем 'null' в качестве значения, если только мы не используем изображения. 

    for (const key of countries) {
  data[key] = null;
}

  3. Наконец, установите данные равными этому новому объекту (который я также назвал data) 

    var options = {
   data: data
}

Когда вы инициализируете автозаполнение, мы передаем данные через объект параметров: 

   var instances = M.Autocomplete.init(elems, options);

Рабочий код ручки здесь .

Полный код: 

document.addEventListener('DOMContentLoaded', function() {

    var elems = document.querySelectorAll('.autocomplete');

    var countries = ["rome", "london", "new york"];

    var data = {};

    for (const key of countries) {
          data[key] = null;
    }

    var options = {
      data: data
    }

    var instances = M.Autocomplete.init(elems, options);

  });

https://materializecss.com/autocomplete.html

...