¿Cómo puedo aplicar valor condicionalmente a la variable de datos en función de los accesorios? El operador ternario está generando un error. Me gustaría consultar este código:
<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>y me sale el error diciendo:
TypeError Cannot read property 'white' of undefinedIntenté validar los accesorios y configurarlos como no requeridos así:
props: { white: { type: Boolean, required: false, default: false, }, },Pero no ayudó, ¿qué estoy haciendo mal? Gracias
Si necesita una variable de data que depende de otra variable, debe usar una propiedad calculada.
Debe verificar eso en los documentos oficiales: Propiedades computadas
Y en lugar de hamburguerUrl en los datos, lo coloca en la propiedad calculada
<script> export default { name: "HamburgerMenu", props: ["white"], computed: { hamburgerUrl() { return this.white ? "/gfx/hamburger-white.png" : "/gfx/hamburger-menu.png"; } }, }; </script>Y eso es todo.