时间戳

首页 > 解决方案 > 使用 vb-modal 指令和 @click 的 Bootstrap-vue 问题

javascript - 使用 vb-modal 指令和 @click 的 Bootstrap-vue 问题

问题描述

我是 Vue 和 Bootstrap 的新手，我有一个这样的按钮：

<button
    type="button"
    class="btn btn-warning btn-sm"
    v-b-modal.book-update-modal
    @click="editBook(book)">
Update</button>

@click绑定到方法editBook()

export default {
  data() {
    return {
      books: [],      
      editForm: {
        id: "",
        title: "",
        author: "",
        read: []
      },
      message: "",
      showMessage: false
    };
  },
methods: {
  function editBook(book){
      this.editForm = book;
  }
}

问题是当我单击这个时button，除非我再次单击它，否则模态将不会显示。当我从元素中删除@click绑定时，它运行良好。button

我不知道哪里错了。任何帮助，将不胜感激。

- - 编辑 - -

我删除v-b-modal.book-update-modal并添加this.$refs.editBookModal.show();到editBook(book)方法中，单击按钮即可正常工作。但我还是很好奇为什么按钮设置时需要双击显示模型v-b-modal.book-update-modal。

标签： javascriptvue.jsbootstrap-4bootstrap-vue

解决方案

推荐阅读