用vue变量填充物质化自动完成组件。

Question

我正在使用matarialize自动完成组件，我需要用存储在vue.js中的数组来设置其数据。

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

                },
            });
        },

我如何在jquery函数中传递存储在vue数据中的param变量？这个数组充满了JSON数据，其中包含我的数据库中的字符串。

Answer 1

好了，你有了你的数组。

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

我们需要把它转换为一个对象 这样自动完成就可以使用它了，像这样。

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

我们分三步来做

1. 创建一个空对象

   var data = {};
   

2. 循环浏览国家数组，并为数据对象中的每个国家创建键值对。注意，我们使用'null'作为值，除非我们使用图片。

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

3. 最后，将data设置为等于这个新对象（我也将其命名为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.comautocomplete.html。