Popup placeholder, how to rewrite from jQuery to Vue.js?

Question

Vue.js

I started working with Vue.js recently and ran into the problem of implementing a pop-up placeholder in the input field. I found an implementation example, and for several days I have been racking my brains on how to transfer it to Vue.

Example - jsfiddle.net/ms8Ldqv3

Vue component HTML code

<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/>

But I don’t know how to rewrite the JS + jQuery code in Vue so that the placeholder remains at the top if something is entered.

Answer 1

Instead of directly adding/removing a class, do a dynamic binding depending on the current value of the input. To make it easier to reuse, make a component: it takes a value and a placeholder as parameters, when the user edits the input, it throws the corresponding event with the new value.
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/