I have successfully implemented a modal in my Vue component that works well with static text inside it, confirming its functionality.
However, when attempting to pass data from the table cell that is being clicked into the modal, I encountered an error stating that name is undefined.
What am I missing in my approach to passing data from each cell into the modal?
<div id="app">
<table>
<tbody>
<tr>
<td v-for="name in names" @click="showDetailModal = true"></td>
<td>@{{ name }}</td>
</tr>
</tbody>
</table>
<div class="modal-vue">
<div class="overlay" v-if="showDetailModal" @click="showDetailModal = false"></div>
<div class="modal" v-if="showDetailModal">
<button class="close" @click="showDetailModal = false">x</button>
<h3>@{{ name.age }}</h3>
</div>
</div>
</div>
new Vue({
el: "#app",
props: {
},
data: {
showDetailModal: false,
names: [
{
"name":"Amy",
"age":37
},
{
"name":"James",
"age":39
}
]
}
})