最近、vue で axios request を使用してバックエンドのデータを取得する場合、バックエンドがデータを返すまでに時間がかかるため、ページのレンダリング時にデータが取得できず、データをレンダリングできないことがわかりました。
インターネット上でさまざまな方法を試しましたが、コードは次のとおりです。
ページ：
<テーブル幅="300px" border="0px">
<tr v-for="historyLists.slice(0, 3) の (項目)" height="30px" οnclick="location.href='#';">
<td><file-text-outlined style="カラー: ダークシアン; フォントサイズ: 18px;" /></td>
<td class="subSystem_td">{ { item.subSystem }}</td>
<td class="timestamp_td"> { { item.timestamp }}</td>
<td><span class="comment_td">{ { item.comment }}</span></td>
</tr>
</テーブル>
「axios」から axios をインポートします。
'vue' から { reactive } をインポートします。
'vue' から { onMounted } をインポートします
インターフェースhistoryListDataItem {
キー: 数字;
サブシステム: 文字列;
releaseVersion: 文字列;
タイムスタンプ: 文字列;
コメント: 文字列;
}
HistoryLists:historyListDataItem[] = []
const getData = async () => {
let mydata = await axios.get('/CheckCorporateResult/Test_histroyList.json')
。それから（
(レス) => {
for (let i = 0; i < res.data.data.length; i++) {
履歴リスト.push({
キー: 私、
サブシステム: res.data.data[i].subSystem,
releaseVersion: res.data.data[i].releaseVersion,
タイムスタンプ: res.data.data[i].timestamp,
コメント: res.data.data[i].comment
})
}
}
)
}
エクスポートのデフォルト ({
設定（） {
getData()
戻る {
データの取得、
歴史リスト
};
}
});
多くの方法が試行され、最終的には変数の定義が間違っていることがわかります。
コード内の赤色でマークされた部分は次のように変更されます。
const HistoryLists = reactive<Array<historyListDataItem>>([])
これは、reactive または ref 型として宣言されている場合にのみ応答型変数となり、その値が変更されたときにページを再レンダリングできるためです。
詳細については、公式 Web サイトを参照してください: Responsive Basics | Vue.js (vuejs.org)