Всплывающий placeholder, как переписать с jQuery на Vue.js?

Question

[w1kenD]

С Vue.js начал работать недавно и столкнулся проблемой реализации всплывающего placeholder'a в поле input. Нашёл пример реализации, и уже несколько дней ломаю голову как это перенести на Vue.

Пример - jsfiddle.net/ms8Ldqv3

HTML код компонента Vue

<form class="login" @submit.prevent="loginUp">
      <h1 class="header">Войти</h1>

      <form class="login-form">
        <div class="cool-input">
          <input
            class="login-input"
            required
            v-model.trim="$v.userName.$model"
            :class="{
              invalid:
                ($v.userName.$dirty && !$v.userName.required) ||
                ($v.userName.$dirty && !$v.userName.maxLength),
              error:
                ($v.userName.$dirty && !$v.userName.required) ||
                ($v.userName.$dirty && !$v.userName.maxLength),
            }"
          />
          <span
            v-bind:class="[usernamePushUp]"
            v-on:click="span"
            class="cool-input__placeholder"
            >Логин</span
          >
<form/>

А вот как переписать код JS + jQuery на Vue, чтобы плейсхолдер оставался вверху, если что-то введено не знаю.

Comments

[Maxim Kirshin]

проверяй $model на пустоту. $model.length

Answer 1

[0xD34F]

Вместо прямого добавления/удаления класса сделайте динамическую привязку в зависимости от текущего значения инпута. Чтобы упростить повторное использование, сделайте компонент: принимает в качестве параметров значение и плейсхолдер, при редактировании пользователем инпута выбрасывает соответствующее событие с новым значением.

props: [ 'value', 'placeholder' ],

<div>
  <input
    :class="value ? 'input_filled' : ''"
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
  <span>{{ placeholder }}</span>
</div>

https://jsfiddle.net/2415wkmg/