用vue变量填充实体化自动完成组件

Question

我正在使用matarialize autocomplete组件，我需要用存储在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. 循环遍历countries数组，并为数据对象中的每个创建一个键值对。请注意，除非使用图像，否则我们使用"null"作为值。

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

3. 最后，将数据设置为等于这个新对象(我也将其命名为数据(

   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