CODEWITHSUNDEEP
javascriptvue.js
Joseph
Joseph

Reputation: 4725

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

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?

Upvotes: 1

Views: 59

Answers (1)

tao
tao

Reputation: 90188

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.

Upvotes: 4

Related Questions