javascript - Selepas menggunakan kaedah yang ditetapkan bagi harta terkira Vue.js, bagaimanakah nilai harta terkira boleh dikemas kini dengan sewajarnya?

Question

dikira: {

cardNum: {
    get: function() {
        return this.ruleForm.cardNum;
    },
    set: function(val) {
        this.ruleForm.cardNum = val.substring(0, 20);
    }
}

}

Saya mengikat kadNum pada model v input dan ingin menggunakan ini untuk menapis nilai (anda tidak boleh mengikat penapis pada pembolehubah model v selepas vue.js2.0), tetapi saya mendapati bahawa apabila input Apabila ia melebihi 20 aksara, walaupun this.ruleForm.cardNum akan dipintas, cardNum boleh melebihi 20 aksara Bolehkah anda beritahu saya bagaimana untuk melaksanakan fungsi had panjang aksara ini?

Answer 1

Saya rasa ini terutamanya soal senario dan idea aplikasi.

1. Senario aplikasi: Secara amnya, pengesahan borang dilakukan apabila fokus hilang atau apabila pengguna mengklik butang OK dan simpan, dan kemudian gesaan copywriting yang sepadan muncul hanya untuk sebarang halaman pendaftaran atau Penguin . Jika anda mengehadkannya seperti ini, interaksi tidak akan cukup mesra, dan ia akan membawa kepada penyelewengan dalam idea pelaksanaan anda.

2. Berfikir: Berkenaan dengan pemahaman computed和v-model, saya tidak mengesyorkan menggunakannya dengan cara ini. v-model itu sendiri direka untuk mencapai pengikatan dua hala, dan menggunakan cara pengiraan menulis satu lagi kaedah set dan satu lagi nilai perantaraan.

Jika anda benar-benar ingin mencapainya, anda boleh mencuba ini

<input type="text" v-model="num">

data() {return { num: '' }}
watch: {
    num(a, b) {
        if (a.length > 20) { this.num = b }
    }

}

Answer 2

Saya tidak tahu sama ada ini memenuhi keperluan anda

<input type="text" maxlength="20">

Answer 3

Jika anda melakukan ini, penetap harta yang dikira tidak akan dicetuskan melainkan dicetuskan secara manual (vm)this.cardNum = 'apa?'
Lihat dokumentasi

Atau anda boleh terus menggunakan pemerhati yang disediakan oleh vue, seperti berikut:

watch: {
  'ruleForm.cardNum': function (newValue) {
     // do something...
  }
}

Tetapi ia tidak digalakkan