Vuex4를 사용하는 Vue3: 어레이 내의 일부 항목만 렌더링할 수 있습니다.

Vuex4를 사용하는 Vue3: 어레이 내의 일부 항목만 렌더링할 수 있습니다.

처음 오신 사용자 및 초보자 개발자님, 잘 부탁드립니다!

그래서 API에서 http JSON 응답을 가져와 더 보기 좋은 결과 목록을 렌더링하는 간단한 웹 앱을 만들고 있습니다.그러나 어떤 이유에서인지 v-for 지시문을 사용하여 항목을 렌더링하면 응답 어레이의 처음 몇 개의 결과만 표시됩니다.이게 제 메인입니다.js:

import { createApp } from 'vue';
import { createStore } from 'vuex';

import App from './App.vue'
import Axios from "axios";

const store = createStore({
    state(){
        return {
            searchResults: null,
        }
    },
    getters: {

    },
    mutations: {
        setResults(state, payload){
            state.searchResults = payload.claims;
        },
        clearResults(state){
            state.searchResults = null;
        }
    },
    actions: {
        submitSearch(context, payload) {
            context.commit('clearResults');
            Axios.request({
              baseURL: "https://factchecktools.googleapis.com/v1alpha1/claims:search",
              method: "get",
              params: {
                languageCode: "en",
                query: payload.searchTerm,
                pageSize: 100,
                key: "AIzaSyCqYStCPuaamvXv1qcuWeof0pEx8TguXeY",
              },
            })
              .then((response) => {
                context.commit('setResults', {claims: response.data.claims})
                //this.$store.dispatch('setResults', {result: response.data.claims})
                //this.searchResults = response.data.claims;
                //this.$emit("search-results", this.searchResults);
              })
              .catch((error) => {
                console.log(error);
              });
        },

    },
})

여기 내 앱이 있다.vue:

<template>
  <div class="container">
    <ClaimSearch @search-results="setResults" />
    <ResultCard
      v-for="(result, index) in searchResults"
      :key="index"
      :claim="result.text"
      :claimant="result.claimant"
      :date="result.claimDate"
      :reviews="result.claimReview"
    />
  </div>
</template>

<script>
import ClaimSearch from "./components/ClaimSearch.vue";
import ResultCard from "./components/ResultCard.vue";

export default {
  name: "App",
  components: {
    ClaimSearch,
    ResultCard,
  },
  computed: {
    searchResults(){
      return this.$store.state.searchResults;
    }
  },
};
</script>

ClaimSearch.vue 컴포넌트는 다음과 같습니다.

<template>
  <form @submit.prevent="submitSearch" class="searchBar">
    <input type="text" v-model="searchTerm" />
    <button type="submit">Is it true?</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: null,
    };
  },
  computed: {},
  methods: {
    submitSearch(){
      this.$store.dispatch('submitSearch', {searchTerm: this.searchTerm})
    }
  },
};
</script>

그리고 마지막으로, 이것이 저의 Result Car입니다.vue 컴포넌트:

<template>
  <div class="resultCard">
    <div class="claimCard">
      <h3>The Claim:</h3>
      <p>{{ claim }} - {{ claimant }}, on {{ date.slice(0, 10) }}</p>
    </div>

    <div class="checkCard">
      <h3>Fact Check:</h3>
      <hr />

      <div v-for="review in reviewList" :key="review.url">
        <b>{{ review.publisher.name }}</b>
        rated this claim as "<b>{{ review.textualRating }}</b
        >". <br />
        Source: "<a :href="review.url" target="_blank"> {{ review.title }} </a>"
        <br />
        - published {{ review.reviewDate.slice(0, 10) }}. <br />
        <hr />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["claim", "claimant", "date", "reviews"],
  data() {
    return {};
  },
  computed: {
    reviewList() {
      return this.reviews;
    },
  },
};
</script>

위의 코드를 사용하면 API 호출이 예를 들어 100개의 항목을 배열할 때 처음 5개 또는 6개만 표시되며 일부 쿼리는 전혀 표시되지 않습니다.왜 그러고 있어?

미리 다시 한 번 감사드려요. 정말 감사합니다!

Wellp, 앱을 빌드하고 배포하는 것만으로 문제를 해결했습니다.Vue에서 로컬 개발 서버에서 테스트할 때 v-for 기능이 중단되는 문제가 있는 것 같습니다.

어쨌든 고마워!

언급URL : https://stackoverflow.com/questions/64327831/vue3-with-vuex4-v-for-only-rendering-a-few-but-not-all-items-in-an-array