Consider the following scenario:
LandingPage.vue
<template>
<button @click="handleClick">Click Me</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit("click");
}
}
};
</script>
App.vue
<template>
<div>
<LandingPage @click="true && handleButtonClick" />
</div>
</template>
<script>
import LandingPage from "./components/LandingPage";
export default {
components: {
LandingPage
},
methods: {
handleButtonClick() {
window.alert("Button clicked!");
}
}
};
</script>
In this case, why does the click event not trigger anything?
Why doesn't
@click="true && handleButtonClick"How does Vue interpret and evaluate expressions like these behind the scenes?