vue框架写的页面的click事件失效

Question

页面结构如下：之前是button失效 我换成span还是失效，试过v-on:click,@click.native都不管用，真心求赐教，已经无力，，

<template>
  <div class="index">
    <div class="top">
        <mt-swipe :auto="2000" v-if="ImgList!=''">
          <mt-swipe-item v-for="(v,k) in ImgList" :key="k">
            <img :src="v.adPicture">
            <!-- <img v-if="v.adUrl==''" :src="v.adPicture">
            <a v-if="v.adUrl!=''" :href="v.adUrl"><img :src="v.adPicture"></a> -->
          </mt-swipe-item>
        </mt-swipe>
    </div>
    <div class="button">
      <span @click="turn_to('/order','order')">我的订单</span>
      <span @click="skip_to('/myCode','myCode')">我的二维码</span>
      <span @click="skip_to('/yzPost','yzPost')">驿站快递</span>
      <span @click="skip_to('index','index')">扫描驿站</span>
      <span @click="turn_to('/cityPost','cityPost')">同城快递</span>
      <span @click="skip_to('/my','my')">个人设置</span>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import wx from "weixin-js-sdk";
import base from "../assets/js/base";
var Cookies = require('js-Cookie');
let hex_md5 = require("crypto-js/md5");
export default {
  name: "index",
  data() {
    return {
      ImgList: []
    };
  },

  methods: {
    getData() {
      let _this = this;
      base.axios_post("", "***************", function(res) {
        if (res.code == 0) {
          _this.ImgList = res.data;
        }else if(data.code==100){
          Cookies.remove('p_openId');
          _this.$router.push({path: '/index'});
        } else {
          _this.$toast(res.message);
        }
      });
    },
    turn_to() {},
    skip_to(path, name) {
      let ptoken = Cookies.get("ptoken");
      let pstate = Cookies.get("pstate");
      if (ptoken!=undefined) {
        if (name == "index") {
          this.sys();
        } else {
          this.$router.push({ path: path });
        }
      } else {
        if (pstate == 0) {
          this.$router.push({ path: "/proof", query: { type: name } });
        } else if (!pstate) {
          this.$router.push({ path: "/register", query: { type: name } });
        }
      }
   },

Answer 1

根据你的代码字面量来看，个人认为是你的那个点击事件写错了，这样写试试：

//为了便于区别，特意改变了传入参数的命名
skip_to(toPath, name) {
    this.$router.push({ path: toPath, query: { type: name } });
}

---

补充内容
这样试试：

<div class="button">

  <span @click="turn_to('order')">我的订单</span>
  <span @click="skip_to('myCode')">我的二维码</span>
  <span @click="skip_to('yzPost')">驿站快递</span>
  <span @click="skip_to('index')">扫描驿站</span>
  <span @click="turn_to('cityPost')">同城快递</span>
  <span @click="skip_to('my')">个人设置</span>
</div>

methods: {
    skip_to(arg) {
        this.$router.push({ path: "/" + arg, query: { type: arg } });
    }
}

---

希望我的回答对你有所帮助！

Answer 2

把代码最简到成一个Demo.html文件放上来看看，这样代码不完整看不出问题所在

Answer 3

首先代码

skip_to(path, name) {
    this.$router.push({ path: path, query: { type: name } });   //参数path 没有用到
}

第二个 你的事件是没触发还是代码问题 来个alert 最直观

Answer 4

先看一下你的路由地址变化了没

Answer 5

看看你的控制台有没有报错，可以在skip_to方法中注释掉其他的代码，单纯的console个东西试试，看看控制台是怎么打印的

Answer 6

点击事件如果没有生效，看下是不是因为有个透明层在你的按钮上面了 加上cursor:pointer样式看看

Answer 7

<div class="button">
  <span @click.native="turn_to('order')">我的订单</span>
  <span @click.native="skip_to('myCode')">我的二维码</span>
  <span @click.native="skip_to('yzPost')">驿站快递</span>
  <span @click.native="skip_to('index')">扫描驿站</span>
  <span @click.native="turn_to('cityPost')">同城快递</span>
  <span @click.native="skip_to('my')">个人设置</span>
</div>

对click添加native试试