Saya punya input:
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">
dan di komponen Vue.js saya, saya punya:
..
..
ready() {
this.form.name = this.store.name;
this.form.validated = this.store.validated;
},
..
validated
menjadi a boolean
, bisa berupa 0
atau 1
, tetapi tidak peduli nilai apa yang disimpan dalam database, input saya selalu dinonaktifkan.
Saya membutuhkan input untuk dinonaktifkan jika false
, jika tidak maka harus diaktifkan dan dapat diedit.
Memperbarui:
Melakukan hal ini selalu mengaktifkan input (tidak masalah saya punya 0 atau 1 dalam database):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">
Melakukan hal ini selalu menonaktifkan input (tidak peduli saya punya 0 atau 1 dalam database):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled : ''">
sumber
true
ataufalse
tergantung pada nilai item di db AndaAnda dapat memiliki properti yang dihitung yang mengembalikan boolean tergantung pada kriteria apa pun yang Anda butuhkan.
lalu letakkan logika Anda di properti yang dihitung ...
sumber
isDisabled()
dalam HTML, didefinisikan dalamData
.Tidak sulit, periksa ini.
jsfiddle
sumber
Atribut yang dinonaktifkan Anda memerlukan nilai boolean:
<input :disabled="validated" />
Perhatikan bagaimana saya hanya memeriksa jika
validated
- Ini harus berfungsi sebagai0 is falsey
... misalnya0 is considered to be false in JS (like undefined or null)
1 is in fact considered to be true
Agar ekstra hati-hati, cobalah:
<input :disabled="!!validated" />
Negasi ganda ini ternyata
falsey
atautruthy
nilai0
atau1
untukfalse
atautrue
tidak percaya padaku masuk ke konsol Anda dan ketik
!!0
atau!!1
:-)Juga, untuk memastikan nomor Anda
1
atau0
pasti datang sebagai Angka dan bukan String'1'
atau'0'
pra-pend nilai yang Anda periksa dengan+
misalnya<input :disabled="!!+validated"/>
ini mengubah string nomor menjadi Nomor misalnya+1 = 1 +'1' = 1
Seperti yang dikatakan David Morrow di atas, Anda dapat menggunakan logika kondisional Anda ke dalam suatu metode - ini memberi Anda kode yang lebih mudah dibaca - cukup kembali dari metode dengan syarat yang ingin Anda periksa.sumber
Anda dapat memanipulasi
:disabled
atribut di vue.js .Ini akan menerima boolean, jika itu benar , maka input akan dinonaktifkan, jika tidak maka akan diaktifkan ...
Sesuatu seperti terstruktur seperti di bawah ini dalam kasus Anda misalnya:
Baca juga di bawah ini:
sumber
Anda dapat membuat properti yang dihitung dan mengaktifkan / menonaktifkan jenis formulir apa pun sesuai dengan nilainya.
sumber
Coba ini
vue js
sumber
Mengalihkan atribut masukan yang dinonaktifkan sangat mengejutkan. Masalah bagi saya ada dua:
(1) Ingat: atribut "nonaktif" input BUKAN atribut Boolean . Kehadiran atribut
semata-mata berarti bahwa input dinonaktifkan.
Namun, pembuat Vue.js telah menyiapkan ini ... https://vuejs.org/v2/guide/syntax.html#Attributes
(Terima kasih kepada @connexo untuk ini ... Bagaimana cara menambahkan atribut yang dinonaktifkan pada teks input di vuejs? )
(2) Selain itu, ada masalah rendering rendering waktu DOM yang saya alami. DOM tidak memperbarui ketika saya mencoba untuk beralih kembali.
Pada situasi tertentu, "komponen tidak akan merender ulang segera. Itu akan memperbarui dalam 'centang.'"
Dari Vue.js docs: https://vuejs.org/v2/guide/reactivity.html
Solusinya adalah menggunakan:
Alur kerja contoh yang lebih lengkap:
sumber
Dapat menggunakan kondisi penambahan ini.
sumber
Ingatlah bahwa ES6 Sets / Maps tampaknya tidak reaktif sejauh yang saya tahu, pada saat penulisan.
sumber