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

【问题标题】：Add class if field is already filled VueJS如果字段已填充 VueJS，则添加类
【发布时间】：2021-05-16 13:16:35
【问题描述】：

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

html:

 <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" @focus="isActive = true" @blur="isActive = false">
      </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" @focus="isActive = true" @blur="isActive = false">
      </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" @focus="isActive = true" @blur="isActive = false">
      </div>
    </div>
  </form>

脚本：

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');
      }
    }

  }
}

我已经在输入中添加了函数，但我需要在填充后才能将“焦点”类添加到 div.input-box。

非常感谢！

【问题讨论】：

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

标签： forms vue.js input

【解决方案1】：

每当输入发生时，您都需要调用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>

【讨论】：