0

我得到以下信息 - 无法读取未定义的“免费”属性。

我将在多个页面上添加这个按钮组件，并且我有数据对象，它允许我根据我想在页面上显示的任何页面添加文本。例如，如果它在我想使用的主页上和我想使用<buttons :text="buttonText.free" />的关于我们页面上<buttons :text="buttonText.spend" />

模板文件

<template>
  <main class="container">
    <buttons :text="buttonText.free" />
  </main>
</template>

<script>
import Buttons from '~/components/atoms/buttons.vue'

export default {
  components: {
    Buttons
  }
}
</script>

组件文件

<template>
  <div>
    <button class="button"">
      <span>{{ buttonText }}</span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    text: String
  },
  data () {
    return {
      buttonText: {
        free: 'free',
        spend: 'spend',
        now: 'now',
        nowFree: 'now free'
      }
    }
  }
}
</script>

你能告诉我我做错了什么吗？

4

3 回答 3

2

data您应该在父组件的属性中定义您的数据。标签内使用的所有变量都template将从data,computed或props组件中获取。您正在将undefinedbuttonText 数据传递给您的buttons组件。

<template>
  <main class="container">
    <buttons :text="buttonText.free" />
  </main>
</template>

<script>
import Buttons from '~/components/atoms/buttons.vue'

export default {
data() {
  return {
    buttonText: {
        free: 'free',
        spend: 'spend',
        now: 'now',
        nowFree: 'now free'
      }
  }
},
  components: {
    Buttons
  }
}
</script>

在您的buttons组件中，只需接受父组件传递的道具。在这种情况下，您将text用作组件的道具buttons。

<template>
  <div>
    <button class="button"">
      <span>{{ text }}</span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    text: String
  }
}
</script>
于 2020-07-21T01:55:25.300 回答
1

模板.vue

<template>
  <main class="container">
    <buttons :text="your customized text" />
  </main>
</template>

<script>
import Buttons from '~/components/atoms/buttons.vue'

export default {
  components: {
    Buttons
  }
}
</script>

按钮.vue

<template>
  <div>
    <button class="button">
      <span>{{ text }}</span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    text: String
  }
}
</script>

这是解决您问题的简单解决方案，
但您需要了解更多关于 vue 组件的基础知识
vue component doc

于 2020-07-21T01:58:43.990 回答
0

由于使用了“现在”，因此不得不提出不同的结构。但我收到以下错误 - 无法读取未定义的属性“真实”。

<template>
  <div>
    <button class="button" :class="type" :style="{ 'width': width }">
      <span>{{ buttonText[this.type] }}</span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    width: String,
    buttonText: {
      free: 'Play free',
      real: 'Play now for real'
    }
  }
}
</script>

<template>
  <main class="container">
    <buttons type="real" />
  </main>
</template>

<script>
import Buttons from '~/components/atoms/buttons.vue'

export default {
  components: {
    Buttons
  }
}
</script>

我究竟做错了什么？

于 2020-07-21T11:12:05.387 回答