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

Posted 2023-02-22

【中文标题】用 vue 变量填充物化自动完成组件

【英文标题】：Fill materialize autocomplete component with vue variable

【发布时间】：2020-08-10 10:48:06

【问题描述】：

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

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

                ,
            );
        ,

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

【问题讨论】：

数组长什么样子？

[“罗马”，“伦敦”，“纽约”，....]

【参考方案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;

最后，将 data 设置为等于这个新对象（我也将其命名为 data）

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