Vue.js模态窗口在从其他组件单击时未打开

我是Vue.js新手，很难理解如何单击打开模式窗口。 基本上，当我从另一个组件调用模态时，我希望打开模态本身，并显示从API调用传递给它的数据。问题是，模态仍然没有显示为内联“display:none”。我要发疯了，为什么我不能使它“显示：块”，即使我设置为真的道具，我传递给模态。 有人能看一下代码并提出一些建议吗？我没有资源了：/

模态分量如下：

 <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>

标题：
{{movieDetails.Title}


年份：
{{movieDetails.Released}


体裁：
{{movieDetails.Genre}


主任:
{{movieDetails.Director}


演员：
{{movieDetails.Actors}


绘图：
{{movieDetails.Plot}


IMDB评级：
{{movieDetails.imdbRating}

接近
导出默认值{
名称：“模态”，
道具：[“电影细节”，“可移动”]
};

我从以下组件调用模态：

<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>

电影数据库
走！
标题
年
海报
{{result.Title}
{{result.Year}
显示信息
没有结果！
从“axios”导入axios；
从“/modal.vue”导入模态；
导出默认值{
名称：“搜索”，
组成部分：{
情态动词
},
数据（）{
返回{
结果提要：[]，
extraInfoFeed:[]，
文本搜索：“”，
modalVisible:错误，
modalData:null
};
},
方法：{
搜索电影（）{
var=这个；
axios
.得到(
`https://www.omdbapi.com/?s=${encodeUri组件(
这个是.textSearch
)}&apikey=a56adf1b`
)
.然后（功能（响应）{
that.resultsFeed=response.data.Search；
})
.catch（函数（错误）{
console.log（错误）；
});
},
moreMovieInfo:函数（结果）{
var=这个；
axios
.得到(
`https://www.omdbapi.com/?i=${encodeUri组件(
result.imdbID
)}&apikey=a56adf1b`
)
.然后（功能（响应）{
that.extraInfoFeed=response.data；
that.modalVisible=true；
//document.getElementById（“modal”）.style.display=“block”；
})
.catch（函数（错误）{
console.log（错误）；
});
//this.modalData=结果；
}
}
};

BroiSatse-不幸的是，它仍然没有显示模式。内联“display:none”已消失，但由于某种原因没有添加“display:block”。有什么想法吗？它不应该添加

display:block

（如果您希望该显示灵活，这将严重影响您），因此如果您的样式中有

display:none

，只需将其删除，让

v-show

发挥其魔力。

<modal v-if="modalVisible" @close="modalVisible = false" :movieDetails="extraInfoFeed" />

<modal :modal-visible="modalVisible" @close="modalVisible = false" :movieDetails="extraInfoFeed" />