मैं Vue के साथ एक लॉगिन/रजिस्टर पेज बना रहा हूं, और मेरे पास लॉगिन के लिए एक टैब और रजिस्टर के लिए एक टैब है।
यह मेरा टेम्पलेट कोड है:
<transition v-bind:name="TabEffect">
<div key="1" class="login" v-if="LoginTab">
<div>
<label class="inputText" for="email">Email Address</label>
<input type="text" name="email" id="email" placeholder="Test@TestMail.com"/>
</div>
<div>
<label class="inputText" for="password">Password</label>
<input type="password" name="password" id="password" placeholder="Your Password"/>
</div>
<button>
{{ LoginTab ? 'Login' : 'Register' }}
</button>
<span class="or">or</span>
<a href="#!" class="steamLogin">
<i class="fab fa-steam"></i>
<span>Login with Steam</span>
</a>
</div>
<!-- Register -->
<div key="2" v-else class="register">
<div>
<label class="inputText" for="email">Email Address</label>
<input type="text" name="email" id="email" placeholder="Test@TestMail.com" />
</div>
<div>
<label class="inputText" for="password">Password</label>
<input type="password" name="password" id="password" placeholder="Your Password"/>
</div>
<div>
<label class="inputText" for="Cpassword">Repeat Password</label>
<input type="password" name="Cpassword" id="Cpassword" placeholder="Repeat Password"/>
</div>
<button>{{ LoginTab ? 'Login' : 'Register' }}</button>
<span class="or">or</span>
<a href="#!" class="steamLogin">
<i class="fab fa-steam"></i>
<span>Login with Steam</span>
</a>
<!-- End of Register -->
</div>
</transition>
कोड ठीक काम करता है लेकिन मेरी समस्या कोड दोहराना है, जैसा कि आप देखते हैं कि हमारे पास v-if और v-else दोनों में कोड का यह हिस्सा है:
<button>{{ LoginTab ? 'Login' : 'Register' }}</button>
<span class="or">or</span>
<a href="#!" class="steamLogin">
<i class="fab fa-steam"></i>
<span>Login with Steam</span>
</a>
मैं चाहता हूं कि यह कोड संक्रमण पर हो, लेकिन मैं दो बार एक कोड दोहराना नहीं चाहता, मैंने v-if और v-else दोनों के बाहर कोड का उपयोग करने का प्रयास किया, लेकिन तत्व प्रदर्शित नहीं हुए सब ।
मैं vue 2.6.11 का उपयोग कर रहा हूँ
अपडेट करें
संक्रमण नाम slideLeft और slideRight हैं
एसएएसएस संक्रमण कोड:
.slideLeft-enter-active,.slideRight-enter-active
transition: 0.4s ease-in-out
.slideLeft-leave-active,.slideRight-leave-active
transition: 0.2s ease-in-out
.slideLeft-enter,.slideRight-leave-to
transform: translateX(-100px)
position: relative
opacity: 0
.slideLeft-enter-to,.slideRight-enter-to,.slideLeft-leave ,.slideRight-leave
transform: translateX(0)
position: absolute
top: 0
width: 100%
.slideLeft-leave-to,.slideRight-enter
transform: translateX(100px)
position: relative
opacity: 0
1 उत्तर
सशर्त भाग को संभालने के लिए v-if को <template> में उपयोग करने का एक तरीका है, सामान्य भाग को छोड़कर:
<transition v-bind:name="TabEffect">
<div v-for="(logTab, i) of [true, false]" v-if="logTab" :key="i+1" :class="LoginTab ? 'login' : 'register'">
<template v-if="LoginTab">
<div>
<label class="inputText" for="email">Email Address</label>
<input type="text" name="email" id="email" placeholder="Test@TestMail.com"/>
</div>
<div>
<label class="inputText" for="password">Password</label>
<input type="password" name="password" id="password" placeholder="Your Password"/>
</div>
</template>
<template v-else>
<div>
<label class="inputText" for="email">Email Address</label>
<input type="text" name="email" id="email" placeholder="Test@TestMail.com"/>
</div>
<div>
<label class="inputText" for="password">Password</label>
<input type="password" name="password" id="password" placeholder="Your Password"/>
</div>
<div>
<label class="inputText" for="Cpassword">Repeat Password</label>
<input type="password" name="Cpassword" id="Cpassword" placeholder="Repeat Password"/>
</div>
</template>
<button>{{ LoginTab ? 'Login' : 'Register' }}</button>
<span class="or">or</span>
<a href="#!" class="steamLogin">
<i class="fab fa-steam"></i>
<span>Login with Steam</span>
</a>
</div>
</transition>
अंत में, चूंकि मुख्य div का वर्ग भी LoginTab चर पर निर्भर करता है, हमें इसे संभालने के लिए एक :class लगाना होगा।
एक तरफ ध्यान दें, आपके कोड का केवल Repeat password अलग-अलग हिस्सा प्रतीत होता है। फिर भी, मैंने email/password को आपके मूल प्रश्न के प्रति अधिक विश्वासयोग्य होने की शर्त पर छोड़ दिया है। (और क्योंकि इसे बदलना बहुत आसान होगा।)
v-forदो डिव नहीं बनाएंगे और निचले हिस्से की नकल नहीं करेंगे? मुझे लगता है कि इसे हटा दिया जाना चाहिए। ट्रांज़िशन काम करने के लिए मुझे लगता है कि आपकोkeyको वापस लाने की जरूरत है, जो कि प्रश्न में था, इसके मूल्य कोLoginTabपर सशर्त बना दिया।v-ifको निचले भाग के दोहराव का ध्यान रखना चाहिए।The 'undefined' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'