Vue.js 模态窗口在从另一个组件单击时未打开

Posted 2023-02-23

【中文标题】Vue.js 模态窗口在从另一个组件单击时未打开

【英文标题】：Vue.js modal window not opening on click from another component

【发布时间】：2020-10-09 12:23:40

【问题描述】：

我是 Vue.js 的新手，正在努力理解如何在点击时打开模式窗口。 基本上，当我从另一个组件调用模态时，我想打开模态本身并显示我从 API 调用传递给它的数据。问题是模态仍然没有显示内联“显示：无”。我要疯了，为什么即使我将要传递给模态的道具设置为 true，我也无法将其设为“显示：块”。 任何人都可以查看代码并提出建议吗？我没有资源了：/

模态组件如下：

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

我从以下位置调用模态的组件：

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

【参考方案1】：

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

所以你在这里使用v-if 并且你的模型组件期望modalVisible 作为一个工作的道具。因此，即使modalVisible 为真，v-if 也会允许创建 Modal 组件，但其内部 v-show 将隐藏它，因为它的 modalVisible 属性为空。

这应该工作：

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

【讨论】：

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

它不应该添加display: block（如果你希望显示是灵活的，这会严重影响你），所以如果你的样式中有display: none，只需删除它并让@ 987654330@ 发挥它的魔力。