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

Posted 2023-02-16

【中文标题】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!'

【参考方案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