javascript - 需要帮助限制数组/优化 axios 响应

Question

我有类似 /url/{category} 的内容。

这是在主页上获取其中一些内容的代码:

export default {
    data() {
        return {
            topnews:[],
            newsfive:[],
            categories: { 
                tshirts:'',
                shirts:'',
                shoes:'',
                useful:'', 
            }
        }
    },
    methods() {
        async getAll(){
            axios.all([
                axios.get(`/topnews`),
                axios.get(`/news`),
                axios.get(`/tshirts`),
                axios.get(`/shirts`),
                axios.get(`/shoes`),
                axios.get(`/useful`)])
                .then(axios.spread((topnews, news, tshirts, shirts, shoes, useful) => {
                    news.data.length = 5;
                    tshirts.data.length = 5
                    shirts.data.length = 5
                    shoes.data.length = 5
                    useful.data.length = 5
                    // How to limit these appropriately? 

                    this.newsfive = news.data;
                    this.topnews = topnews.data;

                    this.categories = {
                        tshirts: tshirts.data,
                        shirts: shirts.data,
                        shoes: shoes.data,
                        useful: useful.data,
                    }
                })).catch(error => console.log(error))
        }
    }
    created()  {
        this.getAll() 
    }
}

这可行，但如果我将路线更改为 /tshirts 并使用浏览器返回主页，我会得到:

typeerror content read-only property

是否可以将其组合成一个数组，而不是创建 7 个不同的 div，例如:

<div v-for="tshirts,key in categories.tshirts" :key="categories.tshirts.slug">
    <img :src="tshirts.thumb" class="img-responsive" width=100%/>
    <p>{{tshirts.title}}</p>
</div>

而是使用过滤后的计算 axios 响应之类的东西，然后只使用单个 div？

<div v-for="item,key in categories(tshirts)" :key="categories(item.slug)">

如何限制 axios 数组响应大小？

Answer 1

创建Category.vue以仅呈现类别内容

<template>
  <div v-for="(item, key) in category" :key="item.slug">
      <img :src="item.thumb" class="img-responsive" width=100% />
      <p>{{ item.title }}</p>
  </div>
</template>
<script>
export default {
    data() {
        return {
            category: { }
        }
    },
    methods() {
        getCategory() {
          axios.get(`/${this.$route.params.category}`)                
               .then((response) => {
                  this.category = response.data.slice(0, 5);                    
               }).catch(error => console.log(error));
        }
    }
    created()  {
        this.getCategory() 
    }
}
</script>

并在App.vue中将router-link添加到所有类别

<template>
   <nav>
      <router-link to="{ name: 'category', params: {category: 'tshirts'} }">T-Shirts</router-link>
      <router-link to="{ name: 'category', params: {category: 'shirts'} }">Shirts</router-link>
     <!-- and other -->
   </nav>
   <main>
      <router-view></router-view>
   </main
</template>

不要忘记vue-router

import Category from "./Category.vue"

routes = [
  {
    name: "category",
    path: "/:categoryId",
    component: Category
  }
]