Как заполнить переменную данных vuejs с помощью json из функции?

Question

У меня есть проект, который использует jQuery, и у меня есть много функций, которые возвращают json, и я пытаюсь заполнить переменную данных некоторыми тестовыми данными, но когда я перебираю данные, я ничего не получаю.

Я проверил, чтобы убедиться, что мой вызов ajax возвращает данные json, и это так, и я немного растерялся, почему ничего не возвращается

<div id="app">
   <template v-for="person in persons">
       <div>
           {{ person.FirstName }}
       </div>
   </template>
</div>

<script>
    new Vue({
        el: '#app',
        created: function () {
            this.GetUserDetails();
        },
        data: {
            persons: []
        },
        methods: {
            GetUserDetails() {
                this.persons = CommonFunctions.GetJSON("Person");
            }
        }
    });
</script>

Вот некоторые изPerson json,

[{
    "id": 1,
    "FirstName": "Auroora",
    "LastName": "Kosel",
    "gender": "Female"
  },
  {
    "id": 2,
    "FirstName": "Nevins",
    "LastName": "Rulf",
    "gender": "Male"
  },
  {
    "id": 3,
    "FirstName": "Silvana",
    "LastName": "Cragoe",
    "gender": "Female"
 }]

** EDIT ** Вот функция GetJSON

var CommonFunctions = {
    GetJSON: (whichOne) => {
        $.ajax({
            type: "GET",
            url: "../Scripts/" + whichOne + "JSON.json",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                return data;
            }
        });
    }
}

Answer 1

Насколько я понимаю, функция ajax является асинхронной, поэтому она не возвращает напрямую

Существует простой обходной путь:

   methods: {
        GetUserDetails() {
            this.persons = CommonFunctions.GetJSON("Person", this);
        }
    }

и в вспомогательной функции:

var CommonFunctions = {
    GetJSON: (whichOne, self) => {
        $.ajax({
            type: "GET",
            url: "../Scripts/" + whichOne + "JSON.json",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                self.persons = data
                return data;
            }
        });
    }
}

Answer 2

Ваша GetJSON() функция ничего не возвращает.

var CommonFunctions = {
    GetJSON(whichOne)  {
      return $.getJSON("../Scripts/" + whichOne + "JSON.json");
//    ^^^^^^
    }
}

Now it returns the request/promise (and uses jQuery's shorthand method for retrieving json).

В вашем компоненте вы бы написали

async GetUserDetails() {
  this.persons = await CommonFunctions.GetJSON("Person");
}

Или, если вам не нравится async / await:

 CommonFunctions.GetJSON("Person").then(data => {
   this.persons = data;
 });