安装引导程序后，模态为黑屏

Question

我已经习惯了Vue，但是在安装Bootstrap之前，我的模式完全可以正常工作。现在是黑屏。另外，当我将按钮放在div中时，该按钮不会渲染。当我将按钮移到div之外时，模态甚至不会切换。

这是我要将模态导入到的产品组件：

<template>
<div class="products">
  <h1>All Products</h1>
  <div v-for="product in products" class="single-product">
    <h2 class="title">{{product.title}} - ${{product.price}}</h2>
    <img class="images" :src="product.photo_url"></img>
    <div class="modal">
      <button
        type="button"
        class="btn btn-primary"
        @click="showModal"
      >
        Show Product Info
      </button>

      <modal
        v-show="isModalVisible"
        @close="closeModal"
      />
    </div>

  </div>
</div>
</template>

<script>
//imports
import Vue from 'vue'
import Modal from './Modal.vue'
//import so I can use vue resource for an http request
import VueResource from 'vue-resource'
Vue.use(VueResource)

export default {
  components: {
    'modal': Modal
  },

  data() {
    return {
      //empty products array to be filled after get request
      products: [],
      //set modal visibility to false by default
      isModalVisible: false,
    }
  },

  methods: {
    //show modal when user clicks view product info
    showModal() {
      this.isModalVisible = true;
    },
    closeModal() {
      //close modal when user clicks the close button inside the modal
      this.isModalVisible = false;
    }

  },

  //request to retrieve all products from API using Created
  created() {
    //http request using vue resource from dependencies
    this.$http.get('https://tap-on-it-exercise-backend.herokuapp.com/products').then(function(data) {
      //fill products array by grabbing the data, slicing ot, then setting it to products array
      this.products = data.body.slice(0, data.body.length)
    })
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.images {
  width: 100px;
  height: 100px;
}
</style>

这是我的模态组件，先导出然后导入到产品组件中：

<script>
export default {
  name: 'Modal',
  methods: {
    close() {
      this.$emit('close');
    },
  },
};
</script>
<template>
<transition name="modal-fade">
  <div class="modal-backdrop">
    <div class="modal" role="dialog" aria-labelledby="productTitle" aria-describedby="productDescription">
      <header class="modal-header" id="productTitle">
        <slot name="header">
          Product Title
        </slot>
      </header>

      <section class="product-photo" id="productPhoto">
        <slot name="photo">
          Product Photo
        </slot>
      </section>

      <section class="product-description" id="productDescription">
        <slot name="body">
          Product Description
        </slot>
      </section>
      <footer class="modal-footer">
        <slot name="footer">

          <button type="button" class="btn-green" aria-label="Close modal">
            Like
          </button>

          <button type="button" class="btn-green" @click="close" aria-label="Close modal">
            Close
          </button>
        </slot>
      </footer>
    </div>
  </div>
</transition>
</template>
<style>
.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: #FFFFFF;
  box-shadow: 2px 2px 20px 1px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.modal-header,
.modal-footer {
  padding: 15px;
  display: flex;
}

.modal-header {
  border-bottom: 1px solid #eeeeee;
  color: #4AAE9B;
  justify-content: space-between;
}

.modal-footer {
  border-top: 1px solid #eeeeee;
  justify-content: flex-end;
}

.product-description {
  position: relative;
  padding: 20px 10px;
}

.btn-close {
  border: none;
  font-size: 20px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  color: #4AAE9B;
  background: transparent;
}

.btn-green {
  color: white;
  background: #4AAE9B;
  border: 1px solid #4AAE9B;
  border-radius: 2px;
}
</style>