Vue3与Vuex4：v-仅用于呈现数组中的一些-但不是全部-项目

问题描述

这里的初学者和初学者-预先感谢您的帮助！

因此，我正在制作一个简单的Web应用程序，该应用程序从API接收http JSON响应，并呈现一个外观更好的结果列表。但是由于某种原因，当使用v-for指令渲染项目时，仅显示响应数组中的前几个结果。这是我的main.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);
              });
        },})

这是我的app.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>

最后，这是我的ResultCar.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个项目的数组时，仅显示前五个或前六个-而有些查询根本不显示。有什么作用？

再次感谢-我知道超级菜鸟！

解决方法

很高兴，我通过简单地构建和部署应用程序解决了该问题。我猜Vue发生了什么事，当在本地开发服务器上进行测试时，v-for函数会中断吗？

还是谢谢！