Vue.js modal window not opening on click from another component - vue.js

Question

I'm new to Vue.js and struggling to understand how to open a modal window on click.
Basically when I call the modal from another component I want to open the modal itself and show the data I'm passing to it from an API call. The problem is that that the modal still not shown with an inline "display:none". I'm going crazy why I cannot make it "display:block" even if I'm setting to true the prop I'm passing to the modal.
Can anyone look at the code and advise something? I'm out of resources :/
Modal component below:
<template>
<div id="modal" class="modal fade show" v-show="modalVisible" aria-labelledby="myModalLabel">
<div class="container">
<img :src="movieDetails.Poster" />
<div class="copy">
<p>
<span>Title:</span>
{{ movieDetails.Title }}
</p>
<p>
<span>Year:</span>
{{ movieDetails.Released }}
</p>
<p>
<span>Genre:</span>
{{ movieDetails.Genre }}
</p>
<p>
<span>Director:</span>
{{ movieDetails.Director }}
</p>
<p>
<span>Actors:</span>
{{ movieDetails.Actors }}
</p>
<p>
<span>Plot:</span>
{{ movieDetails.Plot }}
</p>
<p>
<span>IMDB Rating:</span>
{{ movieDetails.imdbRating }}
</p>
</div>
<button class="btn btn-light" #click="$emit('close')">Close</button>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
props: ["movieDetails", "modalVisible"]
};
</script>
Component I'm calling the modal from:
<template>
<div class="container">
<h3>Movies database</h3>
<div class="input-group w-50 mx-auto">
<input
class="form-control"
id="input-search"
type="text"
v-model="textSearch"
placeholder="Search movie by title"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-primary" v-on:click="searchMovie">Go!</button>
</span>
</div>
<div class="list-results" v-if="resultsFeed && resultsFeed.length">
<table class="table table-hover text-left">
<thead class="thead-light">
<tr>
<th scope="col">Title</th>
<th scope="col">Year</th>
<th scope="col">Poster</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="result in resultsFeed" v-bind:key="result.imdbID" :data-id="result.imdbID">
<td>{{ result.Title }}</td>
<td>{{ result.Year }}</td>
<td>
<img alt="movie poster" :src="result.Poster" />
</td>
<td class="text-right">
<button class="btn btn-secondary" #click="moreMovieInfo(result)">Show info</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="list-message" v-else>No results!</div>
<modal v-if="modalVisible" #close="modalVisible = false" :movieDetails="extraInfoFeed" />
</div>
</template>
<script>
import axios from "axios";
import modal from "./Modal.vue";
export default {
name: "Search",
components: {
modal
},
data() {
return {
resultsFeed: [],
extraInfoFeed: [],
textSearch: "",
modalVisible: false,
modalData: null
};
},
methods: {
searchMovie() {
var that = this;
axios
.get(
`https://www.omdbapi.com/?s=${encodeURIComponent(
this.textSearch
)}&apikey=a56adf1b`
)
.then(function(response) {
that.resultsFeed = response.data.Search;
})
.catch(function(error) {
console.log(error);
});
},
moreMovieInfo: function(result) {
var that = this;
axios
.get(
`https://www.omdbapi.com/?i=${encodeURIComponent(
result.imdbID
)}&apikey=a56adf1b`
)
.then(function(response) {
that.extraInfoFeed = response.data;
that.modalVisible = true;
// document.getElementById("modal").style.display = "block";
})
.catch(function(error) {
console.log(error);
});
// this.modalData = result;
}
}
};
</script>

Answer 1

<modal v-if="modalVisible" #close="modalVisible = false" :movieDetails="extraInfoFeed" />
So you are using v-if here and your Model component is expecting modalVisible as a prop to work. So, even when modalVisible is true, v-if will allow Modal component to be created, but its internal v-show will hide it as its modalVisible prop is null.
This should work:
<modal :modal-visible="modalVisible" #close="modalVisible = false" :movieDetails="extraInfoFeed" />