Вызов метода из события click в ссылке на маршрутизатор внутри компонента (Vue.js) - PullRequest
Новая
       31

Вызов метода из события click в ссылке на маршрутизатор внутри компонента (Vue.js)

1 голос
/ 27 июня 2019

Я пытаюсь добиться с помощью Vue.js перехода между двумя компонентами. Каждый компонент имеет кнопку (<router-link>) для перехода к другому компоненту. Каждый раз переход меняется на «слайд-вправо», когда A-> B, на «слайд-левый», когда B-> A. К сожалению, это происходит только одним способом, который я установил по умолчанию («слайд-право» в данных). Метод не вызывается из события click на <router-link>, потому что я попытался добавить кнопку test для вызова функции, и это сработало. Как я могу вызвать метод из события щелчка на <router-link> в компоненте?

Вот мой HTML-файл: 

<div id="app">

    <transition :name="direction">
        <router-view />
    </transition>

</div>

<script type="text/x-template" id="B">
    <section style="position:absolute; width: 100%;height: 100%;">
    (some text)
      <a>
       (Some svg icon)   
       <router-link  v-on:click.native="changeDirection"  to="/">Back to A</router-link>
      </a>
    </section>


 (Same x-template component for A with a button to change to B)

мой CSS: 

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active{
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-left-enter {
    transform: translateX(100%);
}

.slide-left-leave-to {
    transform: translateX(-100%);
}

.slide-right-enter {
    transform: translateX(-100%);
}

.slide-right-leave-to {
    transform: translateX(100%);
}

и мой JS: 

const A = {
    template: '#A',

};
const B = {
    template: '#B',
};

Vue.component('A', {
    template: '#A'
})
Vue.component('B', {
    template: '#B'
})

const routes = [
    { path: '', component: A },
    { path: '/Proprietaire', component: B }
]

const router = new VueRouter({
    routes
});

new Vue({
    data: {
        direction: 'slide-right'
    },

    methods: {
        changeDirection: function(event){
            if(this.direction === 'slide-right')
                this.direction = 'slide-left';
            else if(this.direction === 'slide-left')
                this.direction = 'slide-right'

        }
    },

    router
}).$mount('#app');
...