Forms 如果字段已填充，则添加类VueJS

我是Vue新手，需要向div.input-box添加一个新类，其中包含标签和输入。 在谷歌之后，我可以尝试更多的选择，但没有任何帮助

html:

我已经在input中添加了函数，但我需要在填充后将“focus”类添加到div.input-box

---

非常感谢你

每当出现输入时，您需要调用

checkForInput

函数。另一方面，我认为没有必要在您的案例中使用

@blur

和

@focus

试试这个：

 <form id="form" class="container">
    <div class="row justify-content-center mt-5">
      <div class="input-box col-lg-6" @click="isActive = 1"  :class="{'focus': isActive === 1}">
        <label class="input-label">
          {{ $t("system.first_name") }}
        </label>
        <input type="text" class="input-1" v-model="first_name" @input="checkForInput">
      </div>
      <div class="input-box col-lg-6" @click="isActive = 2" :class="{'focus': isActive === 2}">
        <label class="input-label">
          {{ $t("system.last_name") }}
        </label>
        <input type="text" class="input-1" v-model="last_name" @input="checkForInput">
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="input-box col-lg-12" @click="isActive = 3" :class="{'focus': isActive === 3}">
        <label class="input-label">
          E-mail
        </label>
        <input type="text" class="input-1" v-model="email" @input="checkForInput">
      </div>
    </div>
  </form>

{{$t（“系统名”）}
{{$t（“system.last_name”）}
电子邮件

我刚刚更新了我的答案，因为我认为它与您的问题并不相关。

export default {
  name: "RegistrationSecondVersion",
  data(){
    return {
      isActive: false,
      first_name: null,
      last_name: null,
      email: null
    }
  },
  methods: {
    checkForInput: function (e) {
      let input = e.target;
      if (input.value != '') {
        input.classList.add('focus');
      } else {
        input.classList.remove('focus');
      }
    }

  }
}

 <form id="form" class="container">
    <div class="row justify-content-center mt-5">
      <div class="input-box col-lg-6" @click="isActive = 1"  :class="{'focus': isActive === 1}">
        <label class="input-label">
          {{ $t("system.first_name") }}
        </label>
        <input type="text" class="input-1" v-model="first_name" @input="checkForInput">
      </div>
      <div class="input-box col-lg-6" @click="isActive = 2" :class="{'focus': isActive === 2}">
        <label class="input-label">
          {{ $t("system.last_name") }}
        </label>
        <input type="text" class="input-1" v-model="last_name" @input="checkForInput">
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="input-box col-lg-12" @click="isActive = 3" :class="{'focus': isActive === 3}">
        <label class="input-label">
          E-mail
        </label>
        <input type="text" class="input-1" v-model="email" @input="checkForInput">
      </div>
    </div>
  </form>