父組件上的串列渲染完美運行
<stock-card
class="col-sm"
v-for="(stock, index) in formattedStocks"
:stock="stock"
:key="index"
>
</stock-card>
在嵌套組件上，它只呈現模態組件內回圈的第一個實體
<p class="card-text text-success">{{ stock["name"] }}$</p>
<button
class="btn btn-danger rounded-pill"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
@click="buyStock(stock)"
>
Activate Modal
</button>
<modal :modalTitle="stock['name']" />
我在這兩個組件上都有道具
uj5u.com熱心網友回復：
問題在于使用模態的方式。
通常，引導模式是使用data-bs-toggle="modal" and data-bs-target="modalInfo"屬性打開的。data-bs-target與連接id="modalInfo"，以便打開和關閉模式。
在您的情況下，所有三個都具有相同的 data-bs-target 和 id，因此它在所有情況下都顯示相同的第一個模式。
這是作業示例：Codesandbox
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395491.html
標籤：javascript Vue.js