Why Vue not evaluating anything when writing @click="true && method"?

Question

Please see this example:

HelloWorld.vue

<template>
  <button @click="click">Click</button>
</template>

<script>
export default {
  methods: {
    click() {
      this.$emit("click");
    }
  }
};
</script>

index.vue

<template>
  <div>
    <HelloWorld @click="true && click" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  components: {
    HelloWorld
  },
  methods: {
    click() {
      window.alert("123");
    }
  }
};
</script>

This won't trigger anything, why?

Why @click="true && click" can't do the trick?

What's under the hood? How Vue evaluate things like this?

tao · Accepted Answer · 2020-03-18 04:20:15Z

4

Here's what's "under the hood":

@click is a shorthand for v-on:click. It gets evaluated as a string and matched against the names of defined methods on your vue instance. If matched, the function gets executed with the original event as param.

When the string doesn't match the name of a method defined on the instance, Vue executes that code in the context of the vue instance. That's basically why click="click(smth)" works, as does click="true && click();".
Since you haven't defined any method named true && click (which you can't since it has spaces), nothing happens when you try to execute it.

edited Mar 18, 2020 at 4:20

answered Mar 18, 2020 at 3:56

tao

91.1k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why Vue not evaluating anything when writing @click="true && method"?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related