Javascript / Vue3 - Mixins - 默认为 Return 'null'

Question

我正在构建一个基本的 'required' 表单验证功能。这是函数：

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>

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

我的问题是，我怎样才能 return 的值作为 null/blank 开始？预期流量为：

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

Answer 1

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

声明一个名为 "dirty":

的数据属性

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

在模板中，在设置 dirty 标志的 <input> 上添加一个 input 事件处理程序：
```
<input @input="dirty = true">
```

另外，根据dirty:

有条件地渲染<span>字段

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

demo

Javascript / Vue3 - Mixins - 默认为 Return 'null'

Javascript / Vue3 - Mixins - Return 'null' by default

javascript

vue.js

vuejs3

vue-mixin