использовать те же элементы в v-if и v-else

Question

Я создаю страницу входа / регистрации с 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

SASS Переходный код:

.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

Answer 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 в условном выражении, чтобы быть более верным вашему первоначальному вопросу. (А потому что изменить это было бы очень легко.)