用 vue 变量填充物化自动完成组件
Fill materialize autocomplete component with vue variable
我正在使用 matarialize 自动完成组件,我需要使用存储在 vue.js
中的数组来设置它的数据
data:{
param:[]
},
mounted(){
this.init();
$('input.autocomplete').autocomplete({
data: {
},
});
},
如何将存储在vue数据中的param变量传入jquery函数?该数组填充了 JSON 数据,其中包含来自我的数据库的字符串。
好的,所以你有你的数组:
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);
});
我正在使用 matarialize 自动完成组件,我需要使用存储在 vue.js
中的数组来设置它的数据 data:{
param:[]
},
mounted(){
this.init();
$('input.autocomplete').autocomplete({
data: {
},
});
},
如何将存储在vue数据中的param变量传入jquery函数?该数组填充了 JSON 数据,其中包含来自我的数据库的字符串。
好的,所以你有你的数组:
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);
});