VueJs条件渲染v-if不工作答案

【问题标题】：VueJs Conditional Rendering v-if not workingVueJs条件渲染v-if不工作
【发布时间】：2018-12-17 10:03:49
【问题描述】：

你能帮我弄清楚当我尝试使用 v-if 和 props 时会发生什么吗？

我创建了一个模态组件，在该模态组件内部，我有多个模态，我使用 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>

【问题讨论】：

您正试图在设置“类型”之前初始化模态，因此页面上根本没有要初始化的元素，因此没有实际打开的模态。设置类型，然后初始化模态。
将父组件中的type 更改为计算属性，因此它将是反应性的，并且父组件type 的更改将影响子属性。
@ChrisDixon uhmmm 类型将在我点击后设置，因为我想显示我想要的模式，所以它应该在点击时设置。还是有其他方法可以做到？
@AgentDroid 只是尝试将 this.type = "loading" 放在 "let modal.." 行之前。那样有用吗？第一项工作是进行模态初始化。
@ChrisDixon 我试过但它返回此错误DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

标签： javascript typescript vue.js zurb-foundation nuxt.js

【解决方案1】：

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

myMethod() {
    this.type = "loading"

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

【讨论】：