在 Vue JS 中保留输入值以进行验证

Question

使用 VueJS 制作带有字符串验证的登录功能

这是我的代码：Link

问题出现在下面，

1. 两个输入都保持为空并单击Login按钮

   出现错误信息Enter your username和Enter your password

2. 在这些输入之一中输入一些内容

   ex) 在password 区域输入 xxxx

3. 点击Login按钮

出现问题

4. password输入区域的值消失

我希望每次点击Login 按钮时都将值保留在输入框中，直到两个输入值都正确为止。

我该如何解决？

表单验证函数写在Login.vue

Answer 1

在Form.vue 组件中注册（添加）value 属性：

props: {
// ...your registered props
// add below
  value: {
    type: String,
    default: "",
  },
},

为什么？

因为现在它不是被动的。所以当父组件发生变化时value子组件没有反应。