how to conditionally apply text to data variable based on props in VueJS

Question

How can I conditionally apply value to the data variable based on props, the ternary operator is generating error, I would like to refer to this code:

<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>

and I get the error saying :

TypeError
Cannot read property 'white' of undefined

I have tried to validate the props and set it to not required like so:

  props: {
    white: {
      type: Boolean,
      required: false,
      default: false,
    },
  },

But it didn't help, what am I doing wrong? Thanks

Ignacior · Accepted Answer · 2022-03-06 19:00:45Z

3

If you need a data variable that depends of another variable, you must use a computed property.

You have to check about that on de official docs: Computed Properties

And instead of hamburguerUrl on data, you put it on the computed propert

<script>
export default {
  name: "HamburgerMenu",
  props: ["white"],
  computed: {
    hamburgerUrl() {
      return this.white
        ? "/gfx/hamburger-white.png"
        : "/gfx/hamburger-menu.png";
    }
  },
};
</script>

And that's all.

answered Mar 6, 2022 at 19:00

Ignacior

9576 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

how to conditionally apply text to data variable based on props in VueJS

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