I'm facing an issue with conditional value assignment to the data variable based on props. The ternary operator is causing errors in my code. Here's a snippet for reference:
<template>
<div class="absolute left-3 top-1/2">
<img
:src="hamburgerUrl"
style="width: 25px; cursor: pointer; transform: translateY(-50%)"
alt="toggle menu button"
/>
</div>
</template>
<script>
export default {
name: "HamburgerMenu",
props: ["white"],
data: {
hamburgerUrl: this.white
? "/gfx/hamburger-white.png"
: "/gfx/hamburger-menu.png",
},
};
</script>
When testing this code, I encounter the error message :
TypeError
Cannot read property 'white' of undefined
I attempted to make the prop not required and set a default value like so:
props: {
white: {
type: Boolean,
required: false,
default: false,
},
},
However, it doesn't seem to resolve the issue. Can anyone point out what might be wrong? Thank you