Есть список данных и страницы
Компонент списка - list
<template>
<div>
<router-link class="btn btn-danger" to="/flm/cm/main/create">Создать новую запись</router-link>
<router-link class="btn btn-primary" style="color:#fff;" :to="'/flm/cm/main/index/1'">1</router-link>
<router-link class="btn btn-primary" style="color:#fff;" :to="'/flm/cm/main/index/2'">2</router-link>
<router-link class="btn btn-primary" style="color:#fff;" :to="'/flm/cm/main/index/3'">3</router-link>
<a v-for="(item, index) in itemsList" v-bind:key="index" href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">{{item.id}}</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<router-link style="color:#fff;" :to="'/flm/cm/main/view/' + item.id">Просмотр</router-link>
<router-link style="color:#fff;" :to="'/flm/cm/main/edit/' + item.id">Edit</router-link>
</a>
</div>
</template>
<script>
import axios from "axios";
// @ is an alias to /src
axios.defaults.withCredentials = true;
import {SET_CM_ITEMS} from "../cmStore";
export default {
mounted() {
this.fetchData();
},
methods: {
async fetchData() {
await this.$store.dispatch(SET_CM_ITEMS);
this.isLoading = false;
},
},
computed: {
itemsList() {
return this.$store.getters.CM_ITEMS;
},
},
components: {
},
};
</script>
Компонент который включает список и рядом показывает элементы - Index
<template>
<div class="row" style="width:100%;">
<div class="col-sm-3">
<h2>CM MAIN</h2>
<list />
</div>
<div class="col-sm-9">
<div >
{{element}}
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import list from '@/components/flm/cm/main/list.vue'
// @ is an alias to /src
axios.defaults.withCredentials = true;
import {SET_CM_ITEMS} from "../cmStore";
export default {
data: function() {
return {
data:{},
};
},
mounted() {
},
methods: {
async fetchData(id) {
console.log(id);
await this.$store.dispatch(SET_CM_ITEMS,{id:id});
this.isLoading = false;
}
},
components: {
list
},
computed: {
paginate() {
return this.fetchData(this.$route.params.id);
},
element()
{
if(this.$store.getters.CM_ITEMS)
{
let items = this.$store.getters.CM_ITEMS;
return items[0];
}
}
},
props: {
id: {
required: true
},
},
};
</script>
При запуске не срабатывает пагинация сначала, но после открытия инструмента отладки vue в хроме начинает работать
Почему?
И да все происходит на одной странице, т.е находимся в index роутер указывает на Index