Javascript / Vue3 - Mixins - 默认返回“null”

编程问答 2022-04-24

问题描述

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

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!'

解决方法

一种解决方案是使用 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

javascriptvue-mixinvue.jsvuejs3