Having problems with Vue and images on my modal - html

Question

I have cards that shows the name, description,price and an image, this works but when I press more info I basiclly want to show the same stuff but with more info but the modal doesn't want to show the image, pretty new to vue and such so I have no clue what's wrong:
<div class="container" id="app">
<div class="row justify-content-center mt-5">
<div class="card mr-5 mb-5" v-for="product in products" v-bind:key="product.id">
<div class="card-body">
<img v-bind:src="product.image" style="height:15rem">
<h5 class="card-title">{{ product.name }}</h5>
<p class="card-text">{{ product.description }}</p>
<p class="card-text"><b>Price: {{ product.price }}</b></p>
<button type="button" class="btn btn-primary" data-toggle="modal"
v-on:click="showProductInUpdateForm(product.id)">More Info</button>
</div>
</div>
</div>
<div class="modal fade" id="updateModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">More Info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="formUpdate">
<img v-bind:src="product.image">
<div class="form-group">
<label for="Id">ID</label>
<input type="text" class="form-control" name="updateId" id="updateId" readonly>
</div>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" name="updateName" id="updateName" readonly>
</div>
<div class="form-group">
<label for="Description">Description</label>
<input type="text" class="form-control" name="updateDescription" id="updateDescription" readonly>
</div>
<div class="form-group">
<label for="Price">Price</label>
<input type="text" class="form-control" name="updatePrice" id="updatePrice" readonly>
</div>
<div class="form-group">
<label for="Image">Image</label>
<input type="text" class="form-control" name="updateImage" id="updateImage" readonly>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger float-right" data-dismiss="modal">Close</button>
<button type="button" class="add-to-cart btn btn-primary float-right" data-dismiss="modal">Add to cart</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

Answer 1

You are declaring variable product in a v-for loop. So product can be only accessed inside that loop block.
<div v-for="product in products" v-bind:key="product.id">
{{product}}
</div>
...
<!-- product is 'undefined' here since it's outside of the v-for loop block -->
<img v-bind:src="product.image">
You can store selected item in some global property that can be accessed from everywhere:
<button v-on:click="showProductInUpdateForm(product)">More Info</button>
...
<img v-bind:src="selectedItem.image">
data {
return {
selectedItem: {}
}
},
methods: {
showProductInUpdateForm (product) {
this.selectedItem = product
...
}
}