我的問題是vue js axios回應，似乎資料沒有保存到陣列（newBox）：
我想將 api 回傳的值保存到一個陣列中，以便在組件中的 v-for 中使用它。
`<script setup>
import {
RouterLink,
RouterView
} from 'vue-router';
import {
onMounted,
onUnmounted
} from 'vue'
import Box from './components/Box.vue';
import axios from "axios"
import {
propsToAttrMap
} from '@vue/shared';
var newBox = new Array();
onMounted(() => {
getPosts();
})
async function getPosts() {
try {
const url = `https://someurl.ir/api/v1/api.php`
const response = await axios.get(url)
this.newBox = response.data
}))
} catch (err) {
if (err.response) {
// client received an error response (5xx, 4xx)
console.log("Server Error:", err)
}
}
}
</script>
<template>
<div class="NewBoxRibbon">
<Box v-for="title in newBox" :msg="title" />
</div>
<RouterView />
</template>
<style scoped>
.NewBoxRibbon{
scrollbar-width: 0px;
width: 100%;
height: 450px;
background-color: aquamarine;
overflow-x: auto;
white-space: nowrap;
}
::-webkit-scrollbar {
width: 0;
/* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
</style>`
我使用 fetch 并且似乎在函式 getPosts() 中它無法修改陣列 newBox ......
即使我定義了一個變數并想在函式 getposts 中修改它，也不能這樣做！
uj5u.com熱心網友回復：
定義newBox為 ref 屬性，然后通過回應更新newBox.value = response.data：
import {
onMounted,
onUnmounted,
ref
} from 'vue'
// ....
var newBox = ref([]);
//....
const response = await axios.get(url)
newBox.value = response.data
uj5u.com熱心網友回復：
我同意前面的回答。如果您不將變數包裝在 ref() 中，則您沒有使用 Composition API 的反應性部分，因此 DOM 不會更新。
看來您的 try 塊中有額外的右括號，并注意“this”關鍵字不適用于 setup() 函式。有關從 Options API 到 Composition API 和處理“this”的資訊，請參閱 VueJS 檔案。
最后，仔細檢查回應點符號是否正確。您確定這response.data足以遍歷 JSON 回應還是應該如此response.data.posts？控制臺記錄回應以確保。
<script setup>
import { RouterLink, RouterView } from "vue-router";
import { onMounted, ref } from "vue";
import Box from "./components/Box.vue";
import axios from "axios";
var newBox = ref([]);
onMounted(() => {
getPosts();
});
async function getPosts() {
try {
const url = "https://someurl.ir/api/v1/api.php";
const response = await axios.get(url);
this.newBox.value = response.data.posts;
} catch (err) {
if (err.response) {
// client received an error response (5xx, 4xx)
console.log("Server Error:", err);
}
}
}
</script>
<template>
<div >
<Box v-for="title in newBox" :msg="title" :key="title" />
</div>
<RouterView />
</template>
uj5u.com熱心網友回復：
未更新的原因newBox是您將其創建為普通陣列。在 Vue 中，需要反應性的東西（如v-for計算屬性、觀察者等）需要您使用refofreactive物件。
例如：
import { ref } from 'vue'
const newBox = ref([])
然后在.value屬性上訪問 ref 的值：
newBox.value = response.data
在大多數情況下，您不需要.value在模板中使用，因為它會自動展開（只有一個級別，因此 refs 的物件仍然需要您使用.value，但這可能比您現在需要知道的要多）。
筆記：
- 你不需要使用
thisinscript setup，你幾乎可以把它當作一個普通的 JS 腳本。 - 喜歡
let和const超過var。對于refs 使用const，因為它們永遠不會被重新分配。 new Array()比語法更喜歡陣列文字。- 我不確定您使用
propsToAttrMap的是什么（我什至從未聽說過），但如果您真的需要它，至少從'vue'not匯入它'@vue/shared'。
我已將這些注釋合并到以下代碼中，并省略了不直接相關的部分（HTML onUnmounted、等）。我還洗掉了}))intry塊中的getPosts，因為它們不應該在那里。
因此，您的 JS 代碼將如下所示：
import { onMounted, ref } from "vue";
import axios from "axios";
const newBox = ref([]);
onMounted(() => {
getPosts();
});
async function getPosts() {
try {
const url = `https://someurl.ir/api/v1/api.php`;
const response = await axios.get(url);
newBox.value = response.data;
} catch (err) {
if (err.response) {
// client received an error response (5xx, 4xx)
console.log("Server Error:", err);
}
}
}
額外建議：您應該幾乎總是使用元素key上的屬性（串列渲染 - 維護狀態）。v-forkey
此外，Vue 檔案也很棒！大多數問題只需閱讀相關部分即可回答。
有用的檔案鏈接：
- 反應基礎
- 串列渲染
希望這可以幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521539.html