如何在VueJS中动态更改点击事件答案

【问题标题】：How to change click event dynamically in VueJS如何在VueJS中动态更改点击事件
【发布时间】：2019-10-18 02:31:53
【问题描述】：

当 B 组件完成加载后，我通过 EventBus 向 A 组件发送一个“发射”事件。

并且当从A组件接收到的事件为“on”时，它会将特定数据的值更改为true。

该值在computed中注册，如果值为true，则只能与“a tag”一起使用。

但实际上值变为true但点击事件仍然返回“return false;”

如何让点击事件在 VueJS 中动态表现？

B 组件

...
this.$EventBus.$emit("Loading");
...

一个组件

<template>
    <a href="javascript:void(0)" @click="completed ? btnFinish : 'return false;'">Complete</a>
</template>
<script>
    data() {
        return {
            loading: false,
        }
    },
    mounted() {
        this.$EventBus.$on('Loading', ()=>{
            this.loading = true;
        });
    },
    computed: {
        completed() {
            return this.loading
        }
    }
</script>

【问题讨论】：

你怎么知道'returns "return false;"'？ btnFinish 是什么？
btnFinish()是一个方法来操作。如果“return false;”，点击时什么都不会发生，但是如果console.log()作为方法工作，默认显示console.log()。所以，即使this.loading改成true，点击事件依然返回“return false;”。

标签： javascript vue.js

【解决方案1】：

我想你误解了这个 click 监听器在做什么：

@click="completed ? btnFinish : 'return false;'"

首先，'return false;' 部分除了填充冒号后的空格之外什么都不做。你可以很容易地写null，或者把它改成&&而不是?:。

接下来，@ 侦听器的值可以是函数或表达式。因此，例如，这样的事情将传递一个函数：

@click="btnFinish"

当您传递一个函数时，它将被视为事件的处理程序。

但是，这不是您正在做的事情。你正在传递一个表达式。当你传递一个表达式时，它会被 Vue.js 包装在幕后的函数中。所以当你写这样的东西时：

@click="completed ? btnFinish : 'return false;'"

Vue 会将它编译成这样的监听器函数：

function ($event) {
  return completed ? btnFinish : 'return false;'
}

请注意，btnFinish 指的是一个方法，但它不会调用它。所以为了让这个工作我们需要放在括号中：

@click="completed ? btnFinish() : 'return false;'"

甚至更好：

@click="completed && btnFinish()"

或者更好的是，将整个东西移到一个方法中：

@click="onClick"

methods: {
  onClick () {
    if (this.completed) {
      this.btnFinish()
    }
  }
}

【讨论】：

【解决方案2】：

还有另一种方式首先，从id中找到按钮

 const iButton = document.getElementById('buttonId');
 iButton.onclick = newmethod

【讨论】：