CODEWITHSUNDEEP
vue.jsvuetify.js
espressojava
espressojava

Reputation: 23

How to access an object in an array of objects passed through a prop

I'm trying to create a v-select dropdown which just contains the scores in the teamData object. When I try to render it to the component form the parent nothing shows up, what needs to be added for the list to populate with just the teamNames parameter.

Parent.vue File

var teamData = [
  {
    teamName: "Buccaneers",
    score: 0,

  },
  {
    teamName: "Seahawks",
    score: 0,
  
  },
  {
    teamName: "Patriots",
    score: 0,

  },
  {
    teamName: "49ers",
    score: 0,

  }
]

<score-component :teamData="Team Data"> </score-component>

Component.vue File

<template>
<v-select :items="teamData.score"></v-select>
</template>
<script>
export default{
props:["teamData"]
data: () => ({

});
</script>

Upvotes: 1

Views: 273

Answers (1)

Sombriks
Sombriks

Reputation: 3622

The teamData array must be present on data() section in parent component.

Then you pass it to the :teamData property on score-component.

Take a look at this example: https://codesandbox.io/embed/festive-lumiere-rp1jk2?fontsize=14&hidenavigation=1&theme=dark

Also the official docs has a good section describing on how to work with components: https://v2.vuejs.org/v2/guide/components-props.html

Upvotes: 1

Related Questions