Question

我们正在使用Vue JS和PHP构建Web应用程序，这是Vue JS的新手。服务器端执行很好，该API能够以JSON形式获取数据。在进行API调用之前尝试静态数组显示时，我们发现未调用导入的“ app.js”中的函数，并且显示的表为空。请让我们知道我们可能做错了什么。感谢您的帮助。

import Vue from 'vue';

export const MY_CONST = 'Vue.js';
export let memberList = new Vue({
    el: '#members',
    data: {
        members: []
    },

    mounted: function () {
        this.getAllMembers();
    },

    methods: {
        getAllMembers: function () {
            /*
            axios.get("https://xxxxxx.com/services/api.php")
                .then(function (response) {
                    memberList.members = response.data.members;
                });
            */
            memberList.members = [{ "empname": "Dinesh Dassss" },
                                  { "empname": "Kapil Koranne" }];
        }
    }
});

这是Vue组件。成员对象为空。

<script>
    import * as mykey from './app.js'
    export default {
        name: 'Home',
        props: {
            msg: String
        },
        data() {
            return {
                message: `Hello ${mykey.MY_CONST}!`,
                members: mykey.memberList.members
            }
        }
    };
</script>

Answer 1

您也可以使用此参考作为当前实例参考：

getAllMembers: function () {
          var me = this;
            /*
            axios.get("https://xxxxxx.com/services/api.php")
                .then(function (response) {
                  // direct this not works here but we have 
                 //saved this in another variable and scope of a var is there 
                    me.members = response.data.members;
                });
            */
          // this reference works fine here.
            this.members = [{ "empname": "Dinesh Dassss" },
                          { "empname": "Kapil Koranne" }];
        }

VueJS-导入js文件中的函数未触发

1 个答案: