表单输入未在 DOM 上更新，输入似乎被阻止

问题描述

我有一个简单的注册表单，其中包含 4 个字段 - 组织名称、电子邮件、密码和确认密码。出于某种原因，当我输入 el-inputs 时，DOM 上没有任何更新，字段中也没有显示任何文本。好像 el-input 被禁用了（这不是我使用 devTools 检查过的。）我确实看到每个 keyup 都会触发一个输入事件。我在这里遗漏了什么吗？

模板：

<template>
  <div class="signup">
    <el-col align="center">
      <el-row>
        <div class="header">
          <h3>{{ $t('orgDetails') }}</h3>
        </div>
      </el-row>
      <el-card>
        <div>
          <h4>{{ $t('enterOrgDetails') }}</h4>
        </div>
        <div>
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            class="signup-form">
            <el-form-item prop="orgName">
              <el-input
                v-model="form.orgName"
                v-bind:placeholder="$t('orgName')">
              </el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input
                v-model="form.email"
                v-bind:placeholder="$t('email')">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="form.password"
                v-bind:placeholder="$t('password')">
              </el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <el-input
                v-model="form.confirmPassword"
                v-bind:placeholder="$t('confirmPassword')">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">{{ $t('next') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-col>
  </div>
</template>

脚本：

<script lang="ts">
  import { Vue,Watch,Prop } from 'vue-property-decorator'

  export default class OrgDetails extends Vue {

    private form: any = {
      orgName: "",email: "",password: "",confirmPassword: ""
    }

    private get rules() {
      let rules: any = {
        orgName: [
            {
              required: true,message: this.$t('orgNamerequired'),trigger: "blur"
            },{
              min: 4,message: this.$t('usernameFiveCharacters'),trigger: "blur"
            }
        ],email: [
          { 
            required: true,message: this.$t('validEmailrequired'),trigger: "blur",type: 'email'
          },],password: [
          { 
            required: true,message: this.$t('passwordrequired'),trigger: "blur"
          },{
            min: 5,message: this.$t('passwordFiveCharacters'),trigger: "blur"
          }
        ],confirmPassword: [
          { 
            required: true,}
      return rules
    }
  }
</script>

CSS：

<style>
  .signup {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header {
    justify-content: center;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .signup-form {
    margin-top: 20px;
    width: 340px;
  }
  .signup .el-card {
    padding-top: 10px;
    padding-bottom: 20px;
    margin-bottom: 80px;
    width: 440px;
    display: flex;
    justify-content: center;
  }
  .el-row {
      padding-top: 16px;
  }
</style>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）