Javascript/Vue3 - Mixins - 默认返回 'null'

Question

我正在构建一个基本的“必需”表单验证函数。这是函数:

JS:

export default {
    methods: {
        required(string) {
            if (!string) {
                return 'This field is required!'
            }
        }
    }
}

HTML:

<input id="username"
  v-model="credentials.username"
  type="text"
  name="username"
/>
<span>{{ required(credentials.username) }}</span>

上面的效果很好。如果我开始输入，返回的值变为空。如果我清空输入，返回值会按预期返回，“此字段为必填项”。

我的问题是，如何将值返回为 null/blank 以开始？预期流量为:

• 返回值为 null/空白开始
• 用户开始输入，没有任何变化，因为 string.length != 0
• 用户删除所有字符，导致string.length == 0，导致返回值为'This field is required!'

Answer 1

一种解决方案是使用 input -事件处理程序(为输入中的每个新值调用)设置一个标志以指示该字段是“脏的”。然后根据标志有条件地渲染验证结果(<span>):

1. 声明一个名为 "dirty" 的数据属性:

   export default {
     data() {
       return {
         dirty: false,
       }
     }
   }
   

2. 在模板中，添加 input -<input> 上的事件处理程序设置 dirty标志:

   <input @input="dirty = true">
   

3. 此外，有条件地呈现 <span>基于 dirty 的字段:

   <span v-if="dirty">{{ required(credentials.username) }}</span>
   

demo