1

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

1 回答 1

1
<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" />
于 2020-06-19T09:25:16.290 回答