Импортированный список стран пуст

Question

В приложении Laravel 5.8 / vuejs 2.6 мне нужен список стран, и я создаю файловые ресурсы / js / helpers / country.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
      }
  },