javascript - 导入的国家/地区列表为空

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>

但是国家列表是空的，我不明白为什么？

Answer 1

您将数据中的值定义为空列表[]。

  data: function () {
      return {
          ...
          countriesList : [] // this will make the array as empty
      }
  },

只需删除[]，它就会像countriesList:countriesList。

  data: function () {
      return {
          ...
          countriesList // => countriesList: countriesList
      }
  },