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

【问题标题】：Javascript / Vue3 - Mixins - Return 'null' by defaultJavascript / Vue3 - Mixins - 默认返回'null'
【发布时间】：2021-08-28 20:40:30
【问题描述】：

我正在构建一个基本的“必需”表单验证功能。函数如下：

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>

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

我的问题是，如何将值返回为空/空白开始？预期流量为：

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

【问题讨论】：

标签： javascript vue.js vuejs3 vue-mixin

【解决方案1】：

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

声明一个名为"dirty"的数据属性：

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

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

另外，基于dirty 有条件地渲染<span> 字段：

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

demo

【讨论】：