Looking for assistance in managing arrays and improving axios response handling

Question

Looking for assistance in managing arrays and improving axios response handling

I currently have a structure like /url/{category}.

Below is the code snippet used to fetch and display some of these on the main page:

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

                    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() 
    }
}

The functionality works as intended. However, when changing the route to /tshirts and navigating back to the main page using the browser, an error message is displayed:

typeerror content read-only property

In addition, I am looking for a way to streamline the rendering process by combining the different items into a single array instead of having separate div elements:

<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>

Is it feasible to create a filtered computed response from the axios call and then render a single div element for all items?

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

Additionally, how can I limit the size of the axios response array?

javascript laravel vue.js axios

Answer 1

Answer №1

Implement the Category.vue component to display category-specific content

<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>

In your App.vue, include router-link elements for each category

<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>
     <!-- add more categories here -->
   </nav>
   <main>
      <router-view></router-view>
   </main
</template>

Ensure you have included the vue-router library

import Category from "./Category.vue"

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

Answer 2

Implement the Category.vue component to display category-specific content

<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>

In your App.vue, include router-link elements for each category

<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>
     <!-- add more categories here -->
   </nav>
   <main>
      <router-view></router-view>
   </main
</template>

Ensure you have included the vue-router library

import Category from "./Category.vue"

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

Looking for assistance in managing arrays and improving axios response handling

Answer №1

Similar questions

Having issues with my custom AngularJS directive functionality

Eliminate unseen and unique characters in Java or JavaScript

When using Javascript's querySelector, often times it returns null

Issue with modal rendering in Bootstrap4 when the body is zoomed in

Is jQuery automatically loaded in laravel 6? I keep encountering an uncaught type error

Using jQuery Datepicker, showcase two distinct datepickers on a single page

Framer Motion causes a crash in a Next.js application with the error message: "Unable to find named export 'useId'"

Executing a PHP function within a Laravel controller using Ajax

Issue occurs when nested functions prevent the data() variable from updating

To install the Vue CLI globally, simply type 'npm install -g @vue/cli'. Keep an eye out for any warnings or

Updating the state in React can be achieved by using the `

What is the best way to combine node-sass and sass-autoprefixer in a project?

Failed to locate lodash during npm installation

There seems to be an issue with the React Native FlatList: It appears that there is no overload matching this call and some

Having trouble with my Angular subscription - not behaving as I anticipated

Update a row within an HTML table by incorporating PHP and JavaScript/jQuery, then store the changes within a database

I am interested in extracting information from a public Facebook post

Concealing messages in React after a brief period

My goal is to programmatically eliminate captcha from a website

Flask fails to recognize JSON data when transmitted from Nodejs