vue.js - Vue,有什么v-link禁止跳转方法？

问题描述

问 题

循环了这个列表，但是想要禁用其中的不满足条件的条目，禁止v-link跳转并弹出提示框。

<li class="item" :class="{'active':course.active}" v-for="course in sevenCourses">
    <a v-link="'/course/'">
        <img :src=course.image >
        <span class="title">{{course.title}}</span>
        <span class="state"><i class="icon icon-lock"></i></span>
    </a>
</li>

<!-- 弹框 -->
<section  v-show="rechargeDialog" transition="fade"
         v-tap="hideDialog($event)">
    <div class="v_dialog_model">
        未开启课程，请完成上一课程
    </div>
</section>

methods:{
    showDialog(){
        this.rechargeDialog = true;
    }            
}

解决方案

如果還需要進行比較複雜的操作才能決定是不是要跳轉的話，v-link 就比較不適合，
可以寫在 methods 用 this.$route.router.go() 來處理：

<li class="item" :class="{'active':course.active}" v-for="course in sevenCourses">
    <a @click.prevent="goto(course)">
        <img :src=course.image >
        <span class="title">{{course.title}}</span>
        <span class="state"><i class="icon icon-lock"></i></span>
    </a>
</li>

methods: {
    goto(course) {
        course.active ? this.$route.router.go(`/course/${course.id}`) : alert('...') 
    }
}

这篇关于vue.js - Vue,有什么v-link禁止跳转方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！