CODEWITHSUNDEEP
javascriptvue.js
Juntra
Juntra

Reputation: 119

Props data not showing on child component Vue.JS

I am passing an array of object as props from parent to the child component. This works fine.

When I do {{ questionList }} its show me my whole data, so the props is being received.

When I try to output the data in the child component as {{ questionList[0].question }}, this also works fine. But it only shows me the first question.

But when I try to output my data as {{ questionList.question }}, nothing is being shown.

So how can I ouput all my questions?

Please check out my code below.

Parent Component - questionForm

<template>
<div class="form" >
    <questions v-for="question in questionList" vbind:key="question.question" v-bind:questionList="questionList" />
</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
   }
  }
}

Child component - questions

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

<script>

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

  data () {
    return {

    }
  }
}

Imported data - questionList.js (the data is much bigger but I reduce it for readability purposes)

export default [
{
  question: 'Sex',
  id: 0,
  options: [
    {label: 'Woman', value: 2},
    {label: 'Male', value: 1}
   ]
},
{
  question: 'Age',
  id: 1,
  options: [
    {label: '8-12', value: 1},
    {label: '12-14', value: 2},
    {label: '14-16', value: 2}
  ]
}]

Upvotes: 0

Views: 2680

Answers (3)

ERNEST HAYFORD
ERNEST HAYFORD

Reputation: 1

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

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'],

  }
}

Upvotes: 0

Muhammad Hamdi
Muhammad Hamdi

Reputation: 113

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

Upvotes: 3

Mark
Mark

Reputation: 92440

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

Upvotes: 1

Related Questions