最近项目有好多轮播图，决定用swiper这个插件，看了看Element里面的走马灯，有一个样式比较符合需求，于是决定用一下：

<el-carousel type="card" height="290px">
   <el-carousel-item :key="index" v-for="(item, index) in caseArr" @click="goSolution(item, index)">
        <p class="title">{{item.sum}}</p>
    </el-carousel-item>
</el-carousel>

这里面有一个需求，就是点击走马灯每项的时候，跳转的对应的页面，于是如上代码所示，在el-carousel-item上面加上了@click事件，但是点来点去没反应，官方也没有这个事件，查了查，要给这个点击事件上加上.native修饰符，写成@click.native="goSolution(item, index)"，然后就好了

这个修饰符的意思是：给组件绑定原生事件

举例：如果使用router-link标签，加上@click事件，绑定的事件会无效因为：router-link的作用是单纯的路由跳转，会阻止click事件，你可以试试只用click不用native,事件是不会触发的。此时加上.native，才会触发事件。

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue