dauren101
@dauren101
Python, Django ,Vue.js

Vue.js переход между страницами не работает?

Есть список данных и страницы
Компонент списка - 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
  • Вопрос задан
  • 358 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы