CODEWITHSUNDEEP
vue.jsvue-componentvue-props
Kyle Larsen
Kyle Larsen

Reputation: 31

Can I pass props to a child component and use the data in the parent component in Vue

I would like to pass data to a child component and render that same data in the parent components. Also I would like to use the data in a function and not simply render it in the child. When I pass the props in this example it no longer renders the

tags with the data

 <template>
  <div class="hello">
    <div v-for="(section, index) in sections" :key="index">
      <p>{{section.name}}</p>
      <p>{{section.type}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      sections: [
        {
          name: "scoop",
          type: "boulder"
        },
        {
          name: "pew pew",
          type: "roped"
        }
      ]
    };
  },
  props: ["sections"]
};
</script>

Upvotes: 0

Views: 33

Answers (2)

ManUtopiK
ManUtopiK

Reputation: 4714

I assume your code is the parent component:

// parent.vue
<template>
  <div class="hello">
    <div v-for="(section, index) in sections" :key="index">
      <p>{{section.name}}</p>
      <p>{{section.type}}</p>
    </div>
    <my-child-component :sections="sections" />
  </div>
</template>

<script>
import MyChildComponent from '~/components/MyChildComponent.vue'

export default {
  name: "HelloWorld",
  components: {
    MyChildComponent
  },
  data() {
    return {
      sections: [
        {
          name: "scoop",
          type: "boulder"
        },
        {
          name: "pew pew",
          type: "roped"
        }
      ]
    }
  },
  methods: {
    consoleSections() {
      console.log(this.sections) // the way to use data in function
    }
  }
}
</script>

// MyChildComponent.vue
<template>
  <div class="hello">
    <div v-for="(section, index) in sections" :key="index">
      <p>{{section.name}}</p>
      <p>{{section.type}}</p>
    </div>
  </div>
</template>

<script>

export default {
  name: "ChildHelloWorld",
  props: ['sections'],
  methods: {
    consoleSections() {
      console.log(this.sections) // the way to use data in child
    }
  }
}
</script>

Take a look in the vue guide about component: https://v2.vuejs.org/v2/guide/components.html

Upvotes: 0

Andrew Savetchuk
Andrew Savetchuk

Reputation: 1610

You can't use the same word/property name (sections in your case) for data and props.

Upvotes: 1

Related Questions