如何根据 VueJS 中的道具有条件地将文本应用于数据变量

Question

如何根据 props 有条件地将值应用于数据变量，三元运算符会产生错误，我想参考这段代码：

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

我收到错误消息：

TypeError
Cannot read property 'white' of undefined

我已尝试验证道具并将其设置为不需要，如下所示：

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

但这并没有帮助，我做错了什么？谢谢

Answer 1

如果您需要一个依赖于另一个变量的 data 变量，您必须使用计算属性.

你必须在官方文档上查看：Computed Properties

而不是数据上的 hamburguerUrl，你把它放在计算属性上

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

仅此而已。

如何根据 VueJS 中的道具有条件地将文本应用于数据变量

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

javascript

vue.js

vue-component

vuejs2