How to save values ​​in a modal tab if the tab has changed?

Question

JavaScript

I wrote a modal window and it has several tabs, when I switch between them, the changes that were made in the tab are not saved. In the data of one of the tabs, I have an object that I use for v-model

data() {
            generalInfo: { policyName: "",  enableLink: false }
        }

<v-switch
                        helpText="help text"
                        class="policy-editor-field policy-editor-field-switch"
                        label="Link to Datasources"
                        v-model="generalInfo.enableLink"
                    />

I track the changes that I make in the generalInfo object and write it to vuex, so that I can then get the data from all the tabs in the main tab and send a request to save the data

watch: {
        generalInfo: {
            handler(val) {
                if (val) {
                    this.setPolicyToEdit(val)
                }
            },
            immediate: true,
            deep: true
        },
    }

But the data is not saved. Please help me how to implement this logic correctly?

Answer 1

vue has a cool thing about switching components. Keep-alive. Works great on dynamic components. Look in the docks , maybe this is what you need?