[Vuejs]-Vue – Unable pass specific value to higher component

by

2👍

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

1👍

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

👤fengxh

Leave a comment