[Vuejs]-Props data not showing on child component Vue.JS

by

1👍

✅

You are binding the whole list to each question child with:

v-bind:questionList="questionList"

It seems like you want each child to have a single question since you are using v-for in the parent. If that’s the case, just bind a single question to each child:

<questions v-for="question in questionList" vbind:key="question.id" v-bind:question="question" />

Then in the child you should be able to access the properties of that question (make sure to change the prop name in the child component to question):

{{question.question}}
👤Mark

3👍

You are passing the whole questionList while you should pass the single question object in the child component like this

<template>
  <div class="form" >
    <questions v-for="question in questionList" v-bind:key="question.question" v- bind:object="question" />
  </div>
</template>

<script>

import questionList from '../questions/questionList.js'
import questions from '../components/questions'

export default {
  name: 'questionForm',

  components: {
    questions
  },

  data () {
    console.log(questionList)
    return {
      questionList
    }
 }
}

where question here v-bind:object="question" is the object from the loop

and then you can use it in the child component in the props

<template>
  <div class="questions">
    <p> {{ object.question }} </p>
  </div>
</template>

<script>

export default {
  name: 'questions',
  props: ['object'],

  data () {
    return {}
  }
}
👤Muhammad Hamdi

0👍

I changed the code a little bit,
but what you are trying to do is basically looping through the question list then passing each question as a prop in the child question component.

so try this 😀

Inside The Parent Component

<template>
<div class="form" >
    <questions v-for="{question, index} in questionList" :key="index" :question="question" />
</div>
</template>

<script>

import questionList from '../questions/questionList.js'
import questions from '../components/questions'

export default {
  name: 'questionForm',

  components: {
    questions
  },

  data () {
   console.log(questionList)
   return {
     questionList
   }
  }
}

Next inside your child component 

<template>
<div class="questions">
  <p> {{ question.question }} </p>
</div>
</template>

<script>

export default {
  name: 'questions',
  props: ['question'],

  }
}
👤ERNEST HAYFORD

Leave a comment