VueJs有条件渲染v-如果不起作用

Question

你能帮我弄清楚当我尝试使用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>

Answer 1

尝试设置模态类型并等待下一个tick，以便DOM更新并可以通过此插件进行操作。

myMethod() {
    this.type = "loading"

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