Передача опоры от отца к дочернему модальному компоненту с помощью bootstrap-vue

Question

Наличие компонента отца -

<b-nav-item @click="loginModalShow = !loginModalShow">Show</b-nav-item>
<LoginModal :loginShow="loginModalShow"/>

export default {
data () {
  return {
    loginModalShow: false,
  }
}

Наличие дочернего компонента -

<b-modal
  ref="LoginModal"
  v-model="showModal"
/>

export default {
props:['loginShow'],
data () {
  return {
    showModal: this.loginShow,
  }
 }
}

Моя проблема в том, что когда я нажимаю b-nav-item Show, модальное окно не открывается.

Answer 1

То, что вы делаете, - это обновление свойства в LoginModal и ожидание обновления данных в соответствии с новым значением свойства. Однако Vue JS не работает так. Вы можете исправить это, добавив наблюдателя.

В вашей LoginModal добавить это:

watch: {
    loginShow: function () {
        this.showModal= this.loginShow
    }
}

EDIT:

Как подсказывает aBiscuit , лучше добавить новое значение в обработчик часов следующим образом:

loginShow: function (newVal) {
    this.showModal= newVal
}

Answer 2

Просто перепишите ваш дочерний компонент, используя вычисляемое свойство:

<b-modal
  ref="LoginModal"
  v-model="showModal"
/>

export default {
  props:['loginShow'],
  computed: {
    showModal () {
      return this.loginShow
    }
  }
}