modal component has a problem

when I click the delete button in table and the modal is showed and the data is update,but When I click the same button cant show it then I close the modal and click again it’s worked ,why?

"bootstrap-vue": "^1.0.0-beta.5",

<template>
    <div class="container contact-list-container">
        <div class="row row-bottom">
            <div class="col-auto">
                <b-button variant="primary" @click="addContact">添加</b-button>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <b-table 
                    striped 
                    hover 
                    bordered
                    show-empty
                    responsive
                    :items="contacts"
                    :fields="fields">
                    <template slot="actions" scope="row">
                        <b-btn size="sm" @click.stop="updateContact(row.item)" variant="success">编辑</b-btn>
                        <b-btn size="sm" @click.stop="showDeleteModal(row.item)" variant="danger">删除</b-btn>
                    </template>
                </b-table>
            </div>
        </div>

       <b-modal id="delModal"
                 ref="delModal"
                 title="提示"
                 ok-title="确定"
                 close-title="取消"
                 @ok="deleteContact">
            <p>您确定要删除 “{{deleteModal.name}}“ 的基本信息吗？</p>
        </b-modal>
    </div>
</template>

<script>
import { mapState,mapActions } from 'vuex'

export default {
  data() {
    return{
        deleteModal:{
            id:0,
            name:''
        },
        fields: {
            index:{label:'#'},
            fullName: { label: '姓名'},
            email: { label: '邮箱' },
            description: { label: '简介' },
            actions:  { label: '操作',class:'text-center' }
        },
        sortBy: null,
        sortDesc: false,
        filter: null,
        modalDetails: { index:'', data:'' }
    }
  },
  computed:{
    ...mapState({
        contacts:state=>state.ContactList.contacts
    })
  },
  created(){
      this.getContacts();
  },
  methods: {
      ...mapActions([
        'getContacts',
        'deleteContactById'
    ]),
    showDeleteModal(contact){
        this.deleteModal.id=contact.id;
        this.deleteModal.name=`${contact.first_name}${contact.last_name}`
        this.$refs.delModal.show();
    },
    addContact(){
        this.$router.push('/contactsManage/addContact')
    },
    updateContact(item){
        console.log('item:')
        console.log(item)
        this.$router.push(`/contactsManage/editContact/${item.id}`)
    },
    deleteContact(){
        this.$refs.delModal.hide();
        this.deleteContactById({
            id:this.deleteModal.id,
            success:()=>{
                this.getContacts();
            }
        })
    }
  }
}
</script>

<style lang="less">
    #delModal{
        .modal-dialog {
            top:100px;
        }
    }
    .contact-list-container{
        .row-bottom{
            margin-bottom:15px;
        }
    }
</style>

first click

second click

third click

[mosinve]

Hi, check out this snippet please https://jsfiddle.net/cihkem/7xv8r3t7/. Is it fit your use case?

[alexsasharegan]

What do you mean by Vuex state triggers? If you need Vuex state to control v-model, you can use a two way computed property:

{
  computed: {
    modalShow: {
      get(){
        return this.$store.state.modalShow
      },
      set(show){
        this.$store.commit(UPDATE_MODAL_SHOW, Boolean(show))
      }
    }
  }
}