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

Question

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

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

                },
            });
        },

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

Answer 1

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

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