如何使用require.js定义一个类似vue组件的模板并连接数据
how to use require.js define a template like vue component and connect the data
在使用express + require.js和vue cdn的项目中,我尝试使用require.js定义类似vue组件的模板
在index.js中,我有一个数据列表,我想在index.html显示列表项中使用v-for,但是无法连接html中的数据列表
这是我的代码,有没有错误?
index.js
define([
'text!js/components/search/index.html',
'jquery',
], function (template) {
var $ = require('jquery');
var Vue = require('vue');
var ajax = require('js/ajax');
return {
name: 'search',
template: require('text!js/components/search/index.html'),
props: {
},
data: function () {
return {
// data list
Options: [],
};
},
mounted: function () {
this.loadOptions();
},
methods: {
//data list
loadOptions() {
ajax.get('/options/options').then(function (data) {
this.Options = data.Options;
console.log('this.Options Successful get data')
});
},
},
};
});
index.html
<div class="col-12 col-md-6 col-xl-6 ">
<a class="dropdown-item"
href="#"
v-for="opt in Options"
:key="opt.value">
<p :title="opt.label">
{{ opt.label }}
</p>
</a>
</div>
根据代码,您的模板文件位于 components/search/index.html
,是否正确引用了该文件?
更好的是,请将您的代码放在 sandbox/jsfiddle 中并分享 link。所以,任何人都可以轻松地为您查看。
可能是因为 this
?
我假设 console.log('this.Options Successful get data')
按预期工作。尝试按如下方式更改您的 loadOptions
方法:
loadOptions() {
ajax.get('/options/options').then(data => {
this.Options = data.Options;
console.log('this.Options Successful get data')
});
},
箭头函数应该有助于将 this
指向您的 Vue 组件实例。
在使用express + require.js和vue cdn的项目中,我尝试使用require.js定义类似vue组件的模板
在index.js中,我有一个数据列表,我想在index.html显示列表项中使用v-for,但是无法连接html中的数据列表
这是我的代码,有没有错误?
index.js
define([
'text!js/components/search/index.html',
'jquery',
], function (template) {
var $ = require('jquery');
var Vue = require('vue');
var ajax = require('js/ajax');
return {
name: 'search',
template: require('text!js/components/search/index.html'),
props: {
},
data: function () {
return {
// data list
Options: [],
};
},
mounted: function () {
this.loadOptions();
},
methods: {
//data list
loadOptions() {
ajax.get('/options/options').then(function (data) {
this.Options = data.Options;
console.log('this.Options Successful get data')
});
},
},
};
});
index.html
<div class="col-12 col-md-6 col-xl-6 ">
<a class="dropdown-item"
href="#"
v-for="opt in Options"
:key="opt.value">
<p :title="opt.label">
{{ opt.label }}
</p>
</a>
</div>
根据代码,您的模板文件位于 components/search/index.html
,是否正确引用了该文件?
更好的是,请将您的代码放在 sandbox/jsfiddle 中并分享 link。所以,任何人都可以轻松地为您查看。
可能是因为 this
?
我假设 console.log('this.Options Successful get data')
按预期工作。尝试按如下方式更改您的 loadOptions
方法:
loadOptions() {
ajax.get('/options/options').then(data => {
this.Options = data.Options;
console.log('this.Options Successful get data')
});
},
箭头函数应该有助于将 this
指向您的 Vue 组件实例。