मैं 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
0
Abolfazl Ghaemi 17 फरवरी 2020, 22:02

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 को आपके मूल प्रश्न के प्रति अधिक विश्वासयोग्य होने की शर्त पर छोड़ दिया है। (और क्योंकि इसे बदलना बहुत आसान होगा।)

0
acdcjunior 17 फरवरी 2020, 23:47
कोड अच्छी तरह से काम करता है, लेकिन अब संक्रमण में प्रभाव काम नहीं करता
 – 
Abolfazl Ghaemi
17 फरवरी 2020, 22:33
कृपया अद्यतन कोड आज़माएं। हालाँकि, मैंने कहीं टाइप किया होगा;
 – 
acdcjunior
17 फरवरी 2020, 22:44
क्या v-for दो डिव नहीं बनाएंगे और निचले हिस्से की नकल नहीं करेंगे? मुझे लगता है कि इसे हटा दिया जाना चाहिए। ट्रांज़िशन काम करने के लिए मुझे लगता है कि आपको key को वापस लाने की जरूरत है, जो कि प्रश्न में था, इसके मूल्य को LoginTab पर सशर्त बना दिया।
 – 
skirtle
17 फरवरी 2020, 23:41
मैंने कोड अपडेट किया है। बाहरी v-if को निचले भाग के दोहराव का ध्यान रखना चाहिए।
 – 
acdcjunior
17 फरवरी 2020, 23:50
क्या मुझे यह त्रुटि नहीं मिलती है: 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'
 – 
Abolfazl Ghaemi
18 फरवरी 2020, 10:49