When list rendering a component, nested component data doesn't update-CodePudding

The list rendering on the parent component runs perfectly

<stock-card
            
            v-for="(stock, index) in formattedStocks"
            :stock="stock"
            :key="index"
          >
</stock-card>

On the nested component it only renders the first instance of the loop inside the modal component

<p >{{ stock["name"] }}$</p>
<button
  
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
  @click="buyStock(stock)"
>
  Activate Modal
</button>
<modal :modalTitle="stock['name']" />

I do have props on the both components

CodePudding user response：

The problem is with the way modal was used.

Generally, bootstrap modal is opened using data-bs-toggle="modal" and data-bs-target="modalInfo" attributes. data-bs-target is connected with id="modalInfo" in order to open and close the model.

In your case, for all three has the same data-bs-target and id, hence it was showing the same first modal in all the cases.

Here is the working example: Codesandbox