要素UI Autocompleteコンポーネントとフォーム検証の競合：フォーム検証障害の問題を解決する方法は？

コンポーネント形式検証の競合のための要素UI自動完了ソリューション

要素UIのel-autocompleteコンポーネントを使用する場合、フォーム検証障害の問題に遭遇することがよくあります。ユーザーがドロップダウンオプションを選択し、入力ボックスが正しい値を表示している場合でも、フォームはまだ記入されていないことを促します。この記事はこの問題を分析し、解決策を提供します。

問題の説明：

このフォームはel-autocompleteコンポーネントを使用してユーザー名の選択を実装し、 el-form-itemおよびpropプロパティを使用して検証します。 el-autocompleteのselectイベントは、ユーザーの選択ロジックを処理する関数にバインドされます。ただし、ユーザーが選択した後、フォームの検証はまだ失敗し、「ユーザー名を入力してください」とプロンプトします。

コード例：

コンポーネントコード：

<el-form-item label="用户名" prop="username">
  <el-autocomplete :fetch-suggestions="querysearch" class="usernameinput" placeholder="选择或输入用户名" v-model="selectuserinfo">
  </el-autocomplete>
</el-form-item>

検証ルール：

ルール：{
  ユーザー名：[{必須：true、message： 'ユーザー名を入力してください'、トリガー： 'Blur'}]、
  パスワード：[{必須：true、メッセージ： 'パスワードを入力してください'、トリガー： 'Blur'}]
}、

関連機能：

選択（params）{
  console.log（this.selectuserinfo）;
  this.loginform.username = params.username;
  this.loginform.password = atob（params.password）;
}、
onblur（）{
  console.log（ 'Blur'）;
  console.log（this.loginform.username、this.selectuserinfo）;
  this.loginform.username = this.selectuserinfo;
}、

問題の分析と解決策：

問題のルートは、 this.loginform.username = params.usernameを直接割り当てることで、Vueのレスポンシブメカニズムを破壊する可能性があります。 Vueのレスポンシブシステムは、データの変更に依存して、表示の更新をトリガーし、検証を形成します。オブジェクトプロパティを直接変更すると、Vueは変更を追跡できないため、更新できないフォーム検証が作成されます。

解決：

1. loginform.username応答性を確保する： loginform通常のJavaScriptオブジェクトである場合、直接割り当てはVUE応答の更新をトリガーしません。 Vue.setメソッドまたはオブジェクト拡張演算子を使用して、 loginform.username更新して、Vueがデータの変更を追跡するようにします。

   選択（params）{
     this。$ set（this.loginform、 'username'、params.username）; // vue.setを使用します
     this.loginform.password = atob（params.password）;
   }

   または：

   選択（params）{
     this.loginform = {... this.loginform、username：params.username}; //オブジェクト拡張オペレーターthis.loginform.password = atob（params.password）;
   }

2. trigger属性を確認します： trigger: 'blur'入力ボックスがフォーカスを失った場合にのみトリガーします。 el-autocompleteの選択操作はblurイベントをトリガーしない場合があります。 trigger属性を'change'に変更するか、同時に'blur'と'change'を使用するか、実際の状況に基づいて適切なトリガーイベントを選択してみてください。

3. v-modelバインディングとloginform初期化を確認します。V v-modelバインディングデータが正しく、 loginformオブジェクトが応答性のあるオブジェクトとして正しく初期化されていることを確認してください。

上記の方法により、要素UIは、フォーム検証の精度を確保するために要素UIを自動的に完了することにより、コンポーネントとフォーム検証の間の競合の問題を解決できます。

以上が要素UI Autocompleteコンポーネントとフォーム検証の競合：フォーム検証障害の問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。