您能帮我弄清楚当我尝试使用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>
答案 0 :(得分:0)
尝试设置模式类型并等待下一个刻度,以便更新DOM并可以通过此插件对其进行操作。
myMethod() {
this.type = "loading"
this.$nextTick().then(_ => {
let modal = new Foundation.Reveal($("#modal-1"))
modal.open()
})
}