CODEWITHSUNDEEP
vue.js
burtonLowel
burtonLowel

Reputation: 794

Vue: Interpolating a dynamic number of props?

I am trying to make a dynamic component that the parent can pass in data to shape it. I am stuck on how to interpolate the index as part of passed in prop. I assume it's possible but I think I'm just interpolating it incorrectly.

// Parent

<div>
   <BoxComponent
      :numberOfBoxes=3
      boxTitle0="Hi"
      boxTitle1="Foo"
      boxTitle2="Test"
   >
   </BoxComponent>
</div>

//BoxComponent

   <div v-for="(box,index) in numberOfBoxes">
       <div class="title">
           {{boxTitle + ${index}}} <-----
       </div>
   </div>

Upvotes: 0

Views: 63

Answers (1)

SebSob
SebSob

Reputation: 582

Like @yuriy636 also proposed, I would suggest you pass an array of objects named "boxes".

If you assume boxes looks like this:

[
 {title: "Hi"},
 {title: "Foo"},
 {title: "Test"}
]

You can simply do this:

// Parent

<div>
   <box-component :boxes="boxes"/>
</div>

//BoxComponent

   <div v-for="box in boxes">
       <div class="title">
           {{ box.title }}
       </div>
   </div>

Upvotes: 1

Related Questions