今日はVueを試していて、歩く前に走ろうとしていたので、たまに壁にぶつかりました。以前にいくつか質問をしましたが、別の質問に戻りました。
私が最後に尋ねた質問は、「スクリプトではデータ変数にアクセスできませんが、htmlではアクセスできます」でした。問題はタイプミスでした。そのタイプミスが修正されると、スクリプトで配列を入力したデータ変数にアクセスできましたが、ajaxとpromiseを使用してデータ変数を入力する際に問題が発生しましたが、 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に表示されます)
**編集**
データオブジェクトにitemPromiseというプロパティを追加します
GetItemsList() {
this.itemPromise = CommonFunctions.GetItemPriceListByID("ItemList").done();
}
マウントされたフックにこれを追加します:
this.itemPromise.then((res)=>{this.itemPriceList=res})
更新
created
フック我々は呼び出すことにより、プロミスオブジェクトを作成したGetItemsList()
とするその約束を割り当てるitemPromise
には、プロパティmounted
我々が使用するフックitemPromise.then(res=>{...})
私たちに結果を代入するitemPriceList
プロパティ
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加