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

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