Vue.js v-for에서 사용할 어레이에서 Axios를 저장하는 방법

VUE.JS / 글쓴이

문제는 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, 할 수 없다!!



질문에 대한 답변



정의newBox참조 속성으로 지정한 후 응답에 따라 업데이트newBox.value = response.data:

 import {
onMounted,
onUnmounted,
ref
} from 'vue'
// ....
var newBox = ref([]); //....
const response = await axios.get(url)
newBox.value = response.data


저는 앞의 답변에 동의합니다.변수를 ref()로 랩하지 않으면 Composition API의 reactivity 부분을 사용하지 않기 때문에 DOM은 갱신되지 않습니다.

또한 try block에 여분의 클로징 패런이 있는 것 같습니다.또, setup() 함수에는 「this」키워드가 적용되지 않는 것에 주의해 주세요.Options API에서 Composition API로의 이행 및 ‘this’ 처리에 대해서는 VueJs 문서를 참조하십시오.

마지막으로 반응 도트 표기법이 올바른지 다시 확인합니다.확실합니까?response.dataJSON 응답을 통과하는 데 충분한지, 또는 필요한지를 확인합니다.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>


요약

  • 수입품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의reactive물건.

예를 들어 다음과 같습니다.

import { ref } from 'vue'
const newBox = ref([])

그런 다음 참조 값에 액세스에 사용됩니다..value속성:

newBox.value = response.data

사용할 필요가 없습니다..value대부분의 경우 템플릿은 자동으로 래핑이 해제되므로(단일 수준만), 참조 객체는 계속 사용해야 합니다..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);
}
} }

추가 조언: 대부분의 경우key의 속성v-for요소(목록 렌더링 – 상태 유지 관리(를 지정합니다.

또한 Vue 문서는 훌륭합니다!대부분의 질문은 관련 섹션을 읽는 것만으로 대답할 수 있습니다.

유용한 문서 링크:

이게 도움이 됐으면 좋겠네요!



내 실수는 모두 ref와 사용법 v-for…