Design Decision: v-scope not retained inside toggled v-if

[Abdillah]

I just found out that v-scope is re-executed every time the template re-render. This makes states inside a v-if that get toggled off and on again get a reset.

The behavior is reproduced in the following markup.

    <div v-scope="{ isEditing: true }">
        <button @click="isEditing = !isEditing">Toggle editing</button>
        <div v-if="isEditing">
            <div id="div-editing" v-scope="{ foo: 'default value' }">
              <h2>Editing</h2>
              <input id="foo" name="foo" type="text" v-model="foo" />
            </div>
        </div>

        <div v-else>
            <div id="div-not-editing"><h2>Not editing</h2></div>
        </div>
    </div>

with these Cypress-like step, the assertion is wrong.

cy.get('input').should(haveValue('default value'))
cy.get('input').type('Testing v-model can it be retained?')
cy.get('button').click()
cy.get('button').click()
cy.get('input').should(haveValue('Testing v-model can it be retained?'))

Is this going to change in the future or it will keeps being functional the same input the same output?

[fparedlo]

In my opinion using v-scope inside v-scope goes against its design. Why would a child have a different scope from the parent. Your code should look more like :

    <div v-scope="{ isEditing: true, foo: 'default value'}">
        <button @click="isEditing = !isEditing">Toggle editing</button>
        <div v-if="isEditing">
            <div id="div-editing">
              <h2>Editing</h2>
              <input id="foo" name="foo" type="text" v-model="foo" />
            </div>
        </div>
        <div v-else>
            <div id="div-not-editing"><h2>Not editing</h2></div>
        </div>
    </div>

Should work as expected and pass the tests

[Abdillah]

Petite Vue facilitate component pattern, which actually a v-scope. If we use this pattern, there is a high chance we will getting a v-scope inside v-scope.

[fparedlo]

In this case you are using another component for the love of it and not because is really necessary. It is normal what is happening and no a bug. You have hardcoded the data for that component and it will be remounted as the v-if will destroy the HTML node not just hide it.

If you really want to retain the input value you should be using and Store / State outside the component so that every time its destroyed and re-created it uses the latest Store value and not the default.

Adding to many unnecessary v-scopes in your solution will make it underperform

https://github.com/vuejs/petite-vue#global-state-management

[Abdillah]

In this case you are using another component for the love of it and not because is really necessary

Yes, because that is a test case that I tried to cover. But looking at it again, I think the design is better this way.

If you really want to retain the input value you should be using and Store..

That's some solution, thanks.

Adding to many unnecessary v-scopes in your solution will make it underperform

I would like to see petite-vue on such high v-scope usage, to see how big this kind of framework can scale.
Currently I have production code using petite-vue (optimized, tested, and stabilized).
In the long run, of course performance matters and I care about optimization or design alternative.