CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-propsvue-data
Rejaur Rahman
Rejaur Rahman

Reputation: 29

Vue - Unable pass specific value to higher component

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?

Upvotes: 0

Views: 44

Answers (2)

fengxh
fengxh

Reputation: 384

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

Upvotes: 1

rjcarl
rjcarl

Reputation: 742

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>

Upvotes: 2

Related Questions