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

Question

我正在使用 matarialize 自动完成组件，我需要使用存储在 vue.js

中的数组来设置它的数据

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

                },
            });
        },

如何将存储在vue数据中的param变量传入jquery函数？该数组填充了 JSON 数据，其中包含来自我的数据库的字符串。

Answer 1

好的，所以你有你的数组：

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

并且我们需要将它转换成一个对象，以便自动完成可以使用它，就像这样：

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

我们分三步来做：

创建一个空对象
```
var data = {};
```
遍历国家数组并为数据对象中的每个国家创建一个键值对。请注意，除非我们使用图像，否则我们使用 'null' 作为值。
```
for (const key of countries) {
  data[key] = null;
}
```
最后，将数据设置为等于这个新对象（我也将其命名为数据）
```
var options = {
   data: data
}
```

当您初始化自动完成时，我们通过选项对象传递数据：

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

工作代码笔here。

完整代码：

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

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

Fill materialize autocomplete component with vue variable

jquery

vue.js

autocomplete

materialize