时间戳

首页 > 解决方案 > Vue.js 模态窗口在从另一个组件单击时未打开

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

问题描述

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

标签： vue.jsecmascript-6modal-dialogvue-componentvue-props

解决方案

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

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

这应该有效：

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

推荐阅读