'VueJs slot loose binding
I have made custom components for my project: ContentCard and SelectField.
I use vuetify.
The problem is when I try to show/hide conditionally ContentCard. When I make this with v-show everything works fine and data and props was kept there binding. If I input some data to the fields and show or hide components data is still there.
But if I use if-else condition only the first field was kept his state/data. I doubt it is not related to the use of slots can be seen on line 315. I am still very rookie in VueJs but in the documentation, I did not see if I use one default slot then how many components can I put. In my case, I have two fields on one screen and three fields on the other instead of the default slot.
As I said above it work with v-show but the project has already been made and they want to stay with if-else.
Here is code sample CODE
<v-form
ref="form"
v-model="formValid"
class="content-card__form"
lazy-validation
:disabled="disabled"
@submit.prevent="submitAction"
>
<div class="content-card__form-content">
<slot /> //<FormEmailField
<
div
>
<Loading
v-if="loading"
class="loadin"
:progress-size="80"
/>
<div class="content-card__form-actions">
<slot name="actions" />
</div>
</formemailfield>
</div>
</v-form>
<slot name="footer" />
</v-card>
<ContentCard
v-else-if="formState === formStates.SIGN_IN"
ref="form"
class="land__form land__form--sign-in"
:title="$t('login.title')"
:subtitle="$t('login.subtitle')"
>
<div class="field-title">
{{ $t('global.email') }}
</div>
<SelectField
slot
v-model="username"
default
hide-details="auto"
class="field-input-box"
:label="$t('global.email')"
:rules="[rules.required, rules.email]"
@keyup.enter="tryToLogIn"
/>
<div class="field-title">
{{ $t('global.password') }}
</div>
<SelectField
slot
v-model="password"
default
hide-details="auto"
class="field-input-box"
:label="$t('global.password')"
:rules="[rules.required]"
@keyup.enter="tryToLogIn"
/>
</ContentCard>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
