Elemen UI Autocomplete Komponen dan Konflik Pengesahan Bentuk: Bagaimana menyelesaikan masalah kegagalan pengesahan bentuk?

Penyelesaian Penyempurnaan Auto UI Elemen untuk Konflik Pengesahan-Bentuk Komponen

Apabila menggunakan komponen el-autocomplete elemen UI, anda sering menghadapi masalah kegagalan pengesahan bentuk: walaupun pengguna telah memilih pilihan drop-down dan kotak input memaparkan nilai yang betul, borang itu masih mendorong bahawa ia belum diisi. Artikel ini menganalisis masalah ini dan menyediakan penyelesaian.

Penerangan Masalah:

Borang ini menggunakan komponen el-autocomplete untuk melaksanakan pemilihan nama pengguna dan menggunakan ciri-ciri el-form-item dan prop untuk mengesahkan. Acara select el-autocomplete mengikat fungsi yang mengendalikan logik pemilihan pengguna. Walau bagaimanapun, selepas pengguna memilih, pengesahan bentuk masih gagal, mendorong "Sila masukkan nama pengguna".

Contoh kod:

Kod Komponen:

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

Peraturan Pengesahan:

 Peraturan: {
  Nama Pengguna: [{Diperlukan: Benar, Mesej: 'Sila masukkan nama pengguna', mencetuskan: 'blur'}],
  Kata Laluan: [{Diperlukan: Benar, Mesej: 'Masukkan Kata Laluan', Pencetus: 'Blur'}]
},

Fungsi Berkaitan:

 pemilihan (param) {
  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;
},

Analisis dan penyelesaian masalah:

Akar masalahnya ialah secara langsung menyerahkan this.loginform.username = params.username boleh memusnahkan mekanisme responsif Vue. Sistem responsif Vue bergantung pada perubahan data untuk mencetuskan kemas kini dan pengesahan bentuk. Secara langsung mengubah sifat objek, VUE tidak dapat menjejaki perubahan, mengakibatkan pengesahan bentuk yang tidak dapat dikemas kini.

Penyelesaian:

1. Pastikan loginform.username Responsiveness: Jika loginform adalah objek JavaScript biasa, tugasan langsung tidak akan mencetuskan kemas kini responsif Vue. Kemas kini loginform.username Menggunakan Kaedah Vue.set atau Operator Pengembangan Objek Untuk memastikan bahawa VUE menjejaki perubahan data.

    pemilihan (param) {
     Ini. $ set (this.loginform, 'nama pengguna', params.username); // Gunakan vue.set
     this.logInform.password = atob (params.password);
   }

   atau:

    pemilihan (param) {
     this.loginform = {... this.loginform, username: params.username}; // operator pengembangan objek this.loginform.password = atOb (params.password);
   }

2. Semak atribut trigger : trigger: 'blur' mencetuskan hanya jika kotak input kehilangan fokus. Operasi pemilihan el-autocomplete mungkin tidak mencetuskan peristiwa blur . Cuba mengubah suai atribut trigger untuk 'change' atau menggunakan 'blur' dan 'change' pada masa yang sama, atau memilih peristiwa pencetus yang sesuai berdasarkan keadaan sebenar.

3. Semak v-model mengikat dan loginform inisialisasi: Pastikan data pengikatan v-model adalah betul dan objek loginform diasaskan dengan betul sebagai objek responsif.

Melalui kaedah di atas, UI elemen dapat menyelesaikan masalah konflik antara komponen dan pengesahan bentuk dengan melengkapkan UI unsur secara automatik untuk memastikan ketepatan pengesahan bentuk.

Atas ialah kandungan terperinci Elemen UI Autocomplete Komponen dan Konflik Pengesahan Bentuk: Bagaimana menyelesaikan masalah kegagalan pengesahan bentuk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!