如何使用require.js定义一个类似vue组件的模板并连接数据

Question

在使用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>

Answer 1

根据代码，您的模板文件位于 components/search/index.html，是否正确引用了该文件？

更好的是，请将您的代码放在 sandbox/jsfiddle 中并分享 link。所以，任何人都可以轻松地为您查看。

Answer 2

可能是因为 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 组件实例。

如何使用require.js定义一个类似vue组件的模板并连接数据

how to use require.js define a template like vue component and connect the data

express

vue.js

requirejs