Vue - Unable pass specific value to higher component

Question

I am getting the following - Cannot read property 'free' of undefined.

I will be adding this button component on multiple pages and I have data object which will allow me to add text based on whatever page I want displayed on a page. For example if its on the homepage I would like to use <buttons :text="buttonText.free" /> and on about us page I would like to use <buttons :text="buttonText.spend" />

Template file

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

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

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

Component file

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

Could you tell me what I am doing wrong?

score 2 · Answer 1 · answered Jul 21 '20 at 01:55

You should define your data in your parent component's data property. All the variables that is used inside the template tag will be fetched from data, computed or props of the component. You are passing an undefined buttonText data to your buttons component.

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

and in your buttons component, just accept the props passed by the parent component. In this case, you are using text as the props of the buttons component.

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

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

score 1 · Answer 2 · answered Jul 21 '20 at 01:58

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

buttons.vue

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

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

here is a simple solution to solve your problem
but you need to learn more fundamentals on vue components
vue component doc

Vue - Unable pass specific value to higher component

2 Answers2