visma-meglerfront / sweet-modal-vue

The sweetest library to happen to modals.
Other
754 stars 86 forks source link

Tab not appearing dynamically #77

Open NicTorgersen opened 6 years ago

NicTorgersen commented 6 years ago

I have a sweet modal with four tabs. One should be hidden unless a specific condition is true, but it isn't appearing in the DOM.

<template>
    <sweet-modal ref="personModal" :title="person.fullName">
        <sweet-modal-tab id="details" title="PersonDeets">
            <person-details :person="person" />
        </sweet-modal-tab>
        <sweet-modal-tab id="status" title="PersonStatus">
            <person-status :person="person" />
        </sweet-modal-tab>
        <sweet-modal-tab v-if="thisConditionShouldBeTrueSometimes" id="extra" title="Extras">
            <extra-person :person="person" />
        </sweet-modal-tab>
        <sweet-modal-tab id="logs" title="Logs">
            <person-logs :person="person" />
        </sweet-modal-tab>
    </sweet-modal>
</template>

<script>
import Vue from 'vue'

export default Vue.extends({
    data() {
        return { 
            person: {},
        }
    },
    computed: {
        thisConditionShouldBeTrueSometimes() { return this.person.hasOwnProperty('someprop') }
    }
})
</script>

thisConditionShouldBeTrueSometimes is a computed property, which just does some checks for some props on the person-object. However, regardless of the return value of this computed property, the tab does not appear.

It exists in the vue-debugger, but is never rendered in the DOM.

I can't disable it, because when the user navigates to another person the modal will open on the disabled tab.