Vue项目易错点合集

今天药忘吃喽~ 2022-02-25 03:38 238阅读 0赞

## **1.vue2.x---vue-router如何在router-link标签绑定click点击事件、keyup、change等事件** ##

<router-link v-for="(item,index) in productdetailcontent" :key="index" :to="{ path: item.path }" tag='li' @click="showIndicator(index)">
                {
       {item.title}}
                <div :class="current==index ?'selectedindicator':''"></div>
    </router-link>

逻辑上乍一看没有错啊！改了好久，就是不能正常 渲染页面。bug快要气死我了。。。。。。。。

methods:{
         
          showIndicator(index){
            console.log("this.current");
            this.current = index;
            console.log(this.current);
          }
        }

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。

如果使用router-link标签，加上@click事件，绑定的事件会无效因为：router-link的作用是单纯的路由跳转，会阻止click事件。

但父组件想在子组件上监听自己的click的话，需要加上`native`修饰符。

所以如果在想要在router-link上添加事件的话需要@click.native这样写。

@click.native="showIndicator(index)"

参考：

[https://segmentfault.com/q/1010000007896386][https_segmentfault.com_q_1010000007896386]

[https_segmentfault.com_q_1010000007896386]: https://segmentfault.com/q/1010000007896386

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关易错点汇总

1.循环内变量不初始化 for() \{ int res=0; \} 每次置0，防止累加转载于:https://www.cnblogs.com/Marigolc

川长思鸟来/ 2023年08月17日 15:14/ 0 赞/ 120 阅读

相关 nextLine()易错点

1、基本语法 1.1基本使用方法本篇重点nextLine()会读取换行(’\\r’)，但是不会进行输出。 [Java中Scanner类中的方法next()和next

迈不过友情╰/ 2023年01月20日 03:58/ 0 赞/ 194 阅读

相关 char易错点

sizeof("Hello")是6而不是5 strlen("Hello")是5。所以char str\[sizeof("Hello")\]; strcpy(str,"H

今天药忘吃喽~/ 2022年08月26日 13:19/ 0 赞/ 201 阅读

相关字符串处理易错点

一.知识点 1.字符指针和字符数组（1）字符指针，是个变量，存放的是地址而已。是个指针，如只定义，则指针指向不可用的地址，不能乱用，则指针没指向任何地址，赋值后用

素颜马尾好姑娘i/ 2022年08月10日 08:33/ 0 赞/ 197 阅读

相关 oracle易错易混知识点小记

为什么我不能用SYS用户登陆SQL\PLUS，用SYSTEM用户可以登录，答：可以先登陆system用户再切换sys用户切换代码如下： conn sys/

深碍√TFBOYSˉ_/ 2022年08月03日 14:55/ 0 赞/ 195 阅读

相关 js易错点总结

alert(typeof( NaN == NaN));//结果为假。　　var undefined; 　　undefined == null; // true 　　\[

柔光的暖阳◎/ 2022年07月16日 05:27/ 0 赞/ 241 阅读

相关 Vue-router的配置以及实战（易错点）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

墨蓝/ 2022年07月13日 09:46/ 0 赞/ 124 阅读

相关 Vue.js之组件及其易错点

今天，在做一个关于vue的demo的时候，发现vue的组件写法出现了错误，刚开始一直没看出来，经过我的一番查阅，才发现了这个错误，希望大家能够引以为戒，不要犯类似的错误！错

「爱情、让人受尽委屈。」/ 2022年07月13日 08:37/ 0 赞/ 143 阅读

相关 Python易错点总结

1.定义只有一个元素的元组必须要加逗号,否则只是一个数. tuple = (1, ) print(tuple) 2.对于列表和元组,下标值为-1都代表是最后

谁践踏了优雅/ 2022年04月23日 01:14/ 0 赞/ 236 阅读

相关 Vue项目易错点合集

1.vue2.x---vue-router如何在router-link标签绑定click点击事件、keyup、change等事件 <router-link v-f

今天药忘吃喽~/ 2022年02月25日 03:38/ 0 赞/ 239 阅读