Cara menonaktifkan input secara kondisional di vue.js

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 : ''">

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>

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

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

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.

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>

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>

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;
    }
  }
})

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>

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>

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