VueJs условного рендеринга V-если не работает - PullRequest
Новая
       7

VueJs условного рендеринга V-если не работает

0 голосов
/ 17 декабря 2018

Можете ли вы помочь мне выяснить, что происходит, когда я пытаюсь использовать v-if и реквизит?

Я создал модальный компонент, и внутри этого модального компонента у меня есть несколько модалов, и я использую Zurb Foundation Reveal дляпокажи мой модал.Я использую директиву v-if для конкретного отображения модального сигнала, который я хочу.

Вот мой код:

Модальный компонент 

<template>
  <div>
    <div v-if="type === 'loading'" id="modal-1"></div>
    <div v-if="type === 'success'" id="modal-1"></div>
    <div v-if="type === 'error'" id="modal-1"></div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"

export default class MyModal extends Vue {
  @Prop(string) type
}

Родительский компонент 

<template>
  <div>
    <my-modal :type="type"></my-modal>
    <button @click="myMethod()">Click Me</button>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
import MyModal from "../my-modal.vue"

@Component({
  components: { MyModal }
})
export default class ParentComponent extends Vue {
  type: string = ""
  myMethod() {
    let modal = new Foundation.Reveal($("#modal-1"))

    this.type = "loading"
    modal.open()

  }
}
</script>

1 Ответ

0 голосов
/ 19 апреля 2019

Попробуйте установить модальный тип и дождитесь следующего тика, чтобы DOM обновлялся и мог управляться этим плагином. 

myMethod() {
    this.type = "loading"

    this.$nextTick().then(_ => {
        let modal = new Foundation.Reveal($("#modal-1"))
        modal.open()
    })
  }
...