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

Question

In projects that use express + require.js and vue cdn, I try to use require.js to define a template similar to vue components

In index.js, I have a data list, I want to use v-for in the index.html display list item, but I cannot connect the data list in html

This is my code, is there any mistake?

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')
                });
            },
        },
    };
});

question from:https://stackoverflow.com/questions/65881554/how-to-use-require-js-define-a-template-like-vue-component-and-connect-the-data

Answer 1

Maybe because of this?

I assume that console.log('this.Options Successful get data') works as expected. Try to change your loadOptions method as follows:

loadOptions() {
                ajax.get('/options/options').then(data => {
                    this.Options = data.Options;
                    console.log('this.Options Successful get data')
                });
            },

Arrow function should help to point this to your Vue component instance.