using axios data from Laravel pagination array-CodePudding

ok I am stumped and I know its going to be something stupid

Vue:

<ul role="list" >
                <li
                    v-for="item in allActivities"
                    :key="item.id"
                    
                >
                    {{ item.description }}
                </li>
            </ul>

Mounted:

mounted() {
        axios
            .get("/activity")
            .then((response) => (this.allActivities = response.data));
    },

Controller

public function index()
    {
        $activity = Activity::paginate(10);
        
        return $activity;
    }

If in the v-if I change it to allActivities.data it refreshes to show the data until I reload the page and get id not found. If I change the axios to response.data.data it works, but I lose pagination.

IM stuck

CodePudding user response：

response.data is the result from laravel

response.data.data if the data key in the result which is a list of your models

response.data will contain these keys if using

current_page
data
first_page_url
from
last_page
last_page_url
links
next_page_url
path
per_page
prev_page_url
to
total

CodePudding user response：

I did not fully understand the problem. If you want to change page, send the value of the page you want to display to the fetchActivities() method.

<script>
export default {
  data() {
    return {
      allActivities: null
    }
  },
  methods: {
    async fetchActivities(page = 1){
      const {data:activities} = await axios.get(`/activity?page=${page}`)
        this.allActivities = activities
    }
  },
  created() {
    this.fetchActivities()
  }
}
</script>

<template>
  <div v-if="allActivities">
    <ul role="list" >
                <li
                    v-for="item in activities.data"
                    :key="item.id"
                    
                >
                    {{ item.description }}
                </li>
            </ul>
  </div>
</template>