如何保存Axios在Vue.js Axios中使用的数组？
我的问题是在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中修改它，也做不到！！
回答 4
Stack Overflow用户
发布于 2022-10-27 15:30:16
将newBox定义为ref属性，然后通过reponse newBox.value = response.data进行更新
import {
onMounted,
onUnmounted,
ref
} from 'vue'
// ....
var newBox = ref([]);
//....
const response = await axios.get(url)
newBox.value = response.dataStack Overflow用户
发布于 2022-10-27 16:04:49
我同意前面的答案。如果不将变量包装在ref()中，则不会使用组合API的反应性部分，因此DOM不会更新。
它还显示，在try块中有额外的关闭parens，并且注意'this‘关键字不适用于setup()函数。请参阅有关从Options迁移到Composition和处理“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 class="NewBoxRibbon">
<Box v-for="title in newBox" :msg="title" :key="title" />
</div>
<RouterView />
</template>Stack Overflow用户
发布于 2022-10-27 16:20:03
摘要
- 从
ref导入'vue' - 将
newBox定义为const newBox = ref([]) - 使用
newBox作为newBox.value而不是this.newBox
import { ref } from 'vue'
// ...
const newBox = ref([])
// ...
newBox.value = response.data全故事
newBox没有被更新的原因是您将它创建为一个普通数组。在Vue中，需要反应性的事物(如v-for、计算属性、观察者等)要求您使用ref of reactive对象。
例如：
import { ref } from 'vue'
const newBox = ref([])然后在.value属性上访问ref的值：
newBox.value = response.data在大多数情况下，您不需要在模板中使用.value，因为它是自动展开的(只有一个级别，因此refs对象仍然需要您使用.value，但这可能比您现在需要知道的要多)。
备注：
- 您不需要在
this中使用script setup，您可以在很大程度上就好像它是一个常规的JS脚本一样。 - 喜欢
let和const而不是var。对于ref，使用const，因为它们从不重新分配。 - 与
new Array()语法相比，更喜欢数组文本。 - 我不知道您在使用
propsToAttrMap做什么(我甚至从未听说过它)，但是如果您真的需要它，至少从'vue'而不是'@vue/shared'导入它。
我已经将这些注释合并到下面的代码中，并省略了不直接相关的部分(HTML、onUnmounted等)。我还在}))中删除了try块中的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);
}
}
}额外建议:您几乎应该始终在v-for元素(key)上使用v-for属性。
还有，Vue文档非常优秀！大多数问题都可以通过阅读相关章节来回答。
有用的文档链接：
希望这能有所帮助！
https://stackoverflow.com/questions/74224429
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号