Cara menonaktifkan input secara kondisional di vue.js

277

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;
    },
..

validatedmenjadi a boolean, bisa berupa 0atau 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 : ''">
Zaffar Saffee
sumber

Jawaban:

484

Untuk menghapus prop yang dinonaktifkan, Anda harus mengatur nilainya false. Ini harus menjadi nilai boolean untuk false, bukan string 'false'.

Jadi, jika nilai validatedadalah 1 atau 0, maka atur kondisional disabledberdasarkan nilai tersebut. Misalnya:

<input type="text" :disabled="validated == 1">

Berikut ini sebuah contoh.

var app = new Vue({
  el: '#app',

  data: {
    disabled: 0,
  },
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
  <input type="text" :disabled="disabled == 1">
    
  <pre>{{ $data }}</pre>
</div>

asemahle
sumber
di db saya, saya memiliki 0 dan 1 disimpan untuk benar dan salah, bermain dengan biola Anda, 0 dan 1 membuatnya dinonaktifkan
Zaffar Saffee
saya perlu mengedit struktur db saya membuatnya benar dan salah?
Zaffar Saffee
Tidak, cukup setel nilainya ke salah trueatau falsetergantung pada nilai item di db Anda
asemahle
11
lakukan saja:: disabled = "divalidasi" Selama divalidasi Benar / salah atau 0/1, Javascript akan tahu.
Despertaweb
1
@gk kode yang ada di jsfiddle sekarang dalam jawaban
asemahle
63

Anda dapat memiliki properti yang dihitung yang mengembalikan boolean tergantung pada kriteria apa pun yang Anda butuhkan.

<input type="text" :disabled=isDisabled>

lalu letakkan logika Anda di properti yang dihitung ...

computed: {
  isDisabled() {
    // evaluate whatever you need to determine disabled here...
    return this.form.validated;
  }
}
David Morrow
sumber
Ini bekerja untuk saya, tidak perlu mengutip, dalam kasus saya memanggil isDisabled()dalam HTML, didefinisikan dalam Data.
Leo
Saya suka ini pasti jauh lebih rapi
Shady Echo 419
Mengapa tidak ada kutipan yang dibutuhkan?
Ferkze
23

Tidak sulit, periksa ini.

<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="disabled">

jsfiddle

Sebastiao Marcos
sumber
Komponen Anda perlu attrs data dengan cacat: tipe palsu atau boolean.
Sebastiao Marcos
15

Atribut yang dinonaktifkan Anda memerlukan nilai boolean:

<input :disabled="validated" />

Perhatikan bagaimana saya hanya memeriksa jika validated- Ini harus berfungsi sebagai 0 is falsey... misalnya

0 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 falseyatau truthynilai 0atau 1untuk falseatautrue

tidak percaya padaku masuk ke konsol Anda dan ketik !!0atau!!1 :-)

Juga, untuk memastikan nomor Anda 1atau 0pasti 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.

Francis Leigh
sumber
11

Anda dapat memanipulasi :disabledatribut 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:

<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true">

Baca juga di bawah ini:

Menonaktifkan Elemen Input secara Kondisional melalui Ekspresi JavaScript

Anda dapat menonaktifkan elemen input sejajar dengan ekspresi JavaScript. Pendekatan ringkas ini menyediakan cara cepat untuk menerapkan logika kondisional sederhana. Misalnya, jika Anda hanya perlu memeriksa panjang kata sandi, Anda dapat mempertimbangkan melakukan sesuatu seperti ini.

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>
Alireza
sumber
7

Anda dapat membuat properti yang dihitung dan mengaktifkan / menonaktifkan jenis formulir apa pun sesuai dengan nilainya.

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>
Yamen Ashraf
sumber
1
Ini adalah jawaban termudah untuk dibaca dan diterapkan pada kasus penggunaan seseorang, menurut pendapat saya.
Giorgio Tempesta
1
ini adalah satu-satunya hal yang berhasil untuk saya. untuk memindahkan metode untuk dihitung alih-alih metode. Terima kasih!
jokab
6

Coba ini

 <div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> Click me to enable
    </label>
  </p>
  <input :disabled='isDisabled'></input>
</div>

vue js

new Vue({
  el: '#app',
  data: {
    terms: false
  },
  computed: {
    isDisabled: function(){
        return !this.terms;
    }
  }
})
Atchutha rama reddy Karri
sumber
4

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:

this.$nextTick(()=>{
    this.disableInputBool = true
})

Alur kerja contoh yang lebih lengkap:

<div @click="allowInputOverwrite">
    <input
        type="text"
        :disabled="disableInputBool">
</div>

<button @click="disallowInputOverwrite">
    press me (do stuff in method, then disable input bool again)
</button>

<script>

export default {
  data() {
    return {
      disableInputBool: true
    }
  },
  methods: {
    allowInputOverwrite(){
      this.disableInputBool = false
    },
    disallowInputOverwrite(){
      // accomplish other stuff here.
      this.$nextTick(()=>{
        this.disableInputBool = true
      })
    }
  }

}
</script>
Kobi
sumber
++ (Namun, para pembuat Vue.js telah menyiapkan ini ... vuejs.org/v2/guide/syntax.html#Attributes )
Rytis Dereskevicius
2

Dapat menggunakan kondisi penambahan ini.

  <el-form-item :label="Amount ($)" style="width:100%"  >
            <template slot-scope="scoped">
            <el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number>
            </template>
          </el-form-item>
anson
sumber
0

Ingatlah bahwa ES6 Sets / Maps tampaknya tidak reaktif sejauh yang saya tahu, pada saat penulisan.

omarjebari
sumber