进口国家列表为空

Question

在 Laravel 5.8 / vuejs 2.6 应用程序中，我需要使用国家/地区列表，并使用内容创建文件 resources/js/helpers/countries.js ：

export const countriesList = [

    {

        "Code": "AF",

        "Name": "Afghanistan"

    },

    ...

    {

        "Code": "ZW",

        "Name": "Zimbabwe"

    }

]

在 vue 文件中我做了：

<template>

    <div class="page-content col-md-offset-3">

        countriesList:{{ countriesList }}

    </div>

</template>

<script>

    import {bus} from '../../../../app';

    import appMixin from '../../../../appMixin';

    import { getAdmindashApi, getUseAdmindashApi } from "./../../../../helpers/commonFuncs";  // resources/js/helpers/commonFuncs.js

    import { countriesList } from './../../../../../js/helpers/countries.js' // resources/js/helpers/countries.js

    export default {

        data: function () {

            return {

                ...

                countriesList : []

            }

        },

        name: 'PersonalDetails',

    }

</script>

但是 countryList 是空的，我不明白为什么？

Answer 1

您将 data 中的值定义为空列表[]。&nbsp; data: function () {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; countriesList : [] // this will make the array as empty&nbsp; &nbsp; &nbsp; }&nbsp; },只需删除[]，它就会像countriesList: countriesList.&nbsp; data: function () {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; countriesList // => countriesList: countriesList&nbsp; &nbsp; &nbsp; }&nbsp; },