Question

我有一个输入，我想在提交之前检查哪些内容。根据状态（正确或不正确的输入），我设置了一个类来反馈给用户：

new Vue({
  el: "#app",
  data: {
    input: ""
  },
  methods: {
    getClass() {
      if (this.input == "") {
        return "ko";
      } else {
        return "ok";
      }
    }
  }
});

.ok {
  border-width: 3px;
  border-color: green;
}

.ko {
  border-width: 5px;
  border-color: red;
}

.initial {
  border-width: 1px;
  border-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="app">
  <input v-bind:class="getClass(input)" v-model="input">
</div>

它工作正常，除了我希望在对给定字段进行任何操作之前（在上面的示例中为<input>）之前设置中性样式并且在这种情况下应用类initial

这在Vue中很容易做到吗？我可以设想听取每个clicked事件并根据该事件设置类（首先initial然后根据内容设置正确的类）但这相当麻烦。
换句话说，在用户第一次与该元素交互之前，没有任何指示。

有没有一种自然的方式来实现这一目标？

Answer 1

只需在数据属性中添加一个额外的属性touched，这是一个布尔值，用于保存最初是否触摸输入

new Vue({
  el: "#app",
  data: {
    input: "",
    touched: false
  },
  methods: {
    getClass() {
        if(!this.touched){
            return 'initial';
        }else{
            if(this.input == "") {
                return "ko";
            } else {
                return "ok";
            }
        }

    }
  }
});

在输入更改

上将touched的值设置为true

<input v-bind:class="getClass(input)" @change="this.touched = true" v-model="input">

Answer 2

一种可能的解决方案是

将"isInteracted": false添加到data
Watch input并在isInteracted

true

input

除非isInteracted为true

这样，除非用户实际写了一些东西

Answer 3

我认为.once修饰符仅用于此目的。所以，我认为这是最具声明性的解决方案：

new Vue({
  el: "#app",
  data: {
    input: "",
    isTouched: false
  },
  methods: {
    getClass() {
      return this.isTouched ? "ko" : "ok"
    }
  }
});

<div id="app">
  <input
    :class="getClass(input)"
    v-model="input"
    @input.once="isTouched = true"
  >
</div>

是否有一种通用的方式在Vue中说“没有与之交互”？

3 个答案: