javascript - 如何在VueJS中动态更改点击事件

Question

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

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

该值在计算中注册，并且仅当该值为 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>

Answer 1

我认为您误解了这个click监听器的作用:

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

首先，'return false;' 部分除了填充冒号后面的空格之外什么也不做。您可以轻松地编写 null，或将其更改为 && 而不是 ?:。

接下来，@ 监听器的值可以是函数或表达式。例如，像这样的东西将传递一个函数:

@click="btnFinish"

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

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

@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()
    }
  }
}