Невозможно получить доступ к переменной данных в скрипте после заполнения ее с помощью json из вызова ajax

Question

Сегодня я пробовал Vue, и пытался бежать, прежде чем я смог ходить, поэтому я время от времени бегал в стены.Я задал пару вопросов ранее и вернулся с другим.

Последний вопрос, который я задал, был: «Не удалось получить доступ к переменной данных в сценарии, но можно в html», и проблема заключалась в опечатке.Как только эта опечатка была исправлена, я смог получить доступ к переменной данных, которую я заполнил массивом в сценарии, но теперь я столкнулся с проблемой заполнения переменной данных с помощью ajax и обещания, в то время как я могу получить к нему доступ вHTML, я не могу получить доступ к данным переменной в сценарии сейчас, и я дважды проверил, что у меня нет опечаток.

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

Теперь я получаю ошибки и не могу получить доступ к переменной ...

Вот мой вызов ajax:

GetItemPriceListByID: (whichOne) => {
    return $.ajax({
        type: "GET",
        url: "../Scripts/" + whichOne + "JSON.json",
        dataType: "json"
    });
}

Вот копия возвращаемого JSON

[
  {
    "CatalogName": "Retro Doors",
    "ItemName": "French Doors",
    "ItemListPrice": "$461.00",
    "ItemType": "Oak",
    "ItemFeatures": [
      {
        "Features": "Door Quantity",
        "QTY": 2
      },
      {
        "Features": "Door Hinges",
        "QTY": 4
      },
      {
        "Features": "Door Knobs",
        "QTY": 1
      },
      {
        "Features": "Door Looks",
        "QTY": 1
      },
      {
        "Features": "Glass Panes",
        "QTY": 2
      }
    ]
  }
]

HTML: {{item.CatalogName}} {{items.Features}}

скрипт:

new Vue({
        el: '#app',
        beforeCreate: function () {
            console.log("Before Created");
        },
        created: function () {
            console.log("Created");
            this.GetItemsList();
        },
        beforeMount: function () {
            console.log("Before Mount");
        },
        data: {
            itemPriceList: []
        },
        methods: {
            GetItemsList() {
                this.itemPriceList = CommonFunctions.GetItemPriceListByID("ItemList")
                    .done(data => {
                        this.itemPriceList = data;
                        console.log("Completed")
                    }); //result;
            }
        },
        mounted: function () {
            console.log("Mounted");
            console.log(this.itemPriceList[0].CatalogName);
        }
    });

Ошибки, которые я получаю с этим (если запустить, то CatalogName действительно отображается в HTML)

**РЕДАКТИРОВАТЬ **

Answer 1

В вашем объекте данных добавьте свойство itemPromise

   GetItemsList() { 
          this.itemPromise = CommonFunctions.GetItemPriceListByID("ItemList").done(); 
     }

в смонтированном хуке и добавьте:

    this.itemPromise.then((res)=>{this.itemPriceList=res})

UPDATE

в хуке created мы создали объект Promise, вызвав GetItemsList() и присвоив это обещание свойству itemPromise, в хуке mounted мы используем itemPromise.then(res=>{...}), чтобы присвоить результат нашему свойству itemPriceList

Answer 2

this.GetItemsList() вызывается в созданном, но это асинхронный метод, поэтому Vue продолжает вызывать остальные ловушки жизненного цикла.

То, что происходит, «смонтировано», вызывается до возврата вызова Ajax, поэтому список пуст.

Попробуйте:

GetItemsList() {
            this.itemPriceList = CommonFunctions.GetItemPriceListByID("ItemList")
                .done(data => {
                    this.itemPriceList = data;
                    console.log("Completed")

                    console.log(this.itemPriceList)
                    // Additional logic here

                }); //result;
        }

Любая логика, зависящая от itemPriceListбудучи установленным, должен быть добавлен внутри функции стрелки, или как дополнительные методы, которые вызываются внутри функции стрелки.