Vue.js'de giriş koşullu olarak nasıl devre dışı bırakılır

Bir girdim var:

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

ve Vue.js bileşenimde:

..
..
ready() {
        this.form.name = this.store.name;
        this.form.validated = this.store.validated;
    },
..

validatedolarak boolean, ya 0da olabilir 1, ancak veritabanında hangi değerin depolandığına bakılmaksızın, girdim her zaman devre dışıdır.

Girişin devre dışı bırakılması gerekiyorsa false, aksi takdirde etkinleştirilmesi ve düzenlenmesi gerekir.

Güncelleme:

Bunu yapmak her zaman girişi etkinleştirir (veritabanında 0 veya 1 olursa olsun):

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

Bunu yapmak her zaman girişi devre dışı bırakır (veritabanında 0 veya 1 olursa olsun):

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

Devre dışı bırakılan pervaneyi kaldırmak için değerini olarak ayarlamanız gerekir false. Bunun falsedize için değil, boole değeri olması gerekir 'false'.

Bu nedenle, için değer validated1 veya 0 ise, disabledpervaneyi koşullu olarak bu değere göre ayarlayın . Örneğin:

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

İşte bir örnek.

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>

ihtiyacınız olan ölçütlere bağlı olarak bir boole döndüren hesaplanmış bir özelliğiniz olabilir.

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

sonra mantığınızı hesaplanmış bir mülke koyun ...

computed: {
  isDisabled() {
    // evaluate whatever you need to determine disabled here...
    return this.form.validated;
  }
}

Zor değil, bunu kontrol et.

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

jsfiddle

Devre dışı bırakılmış özelliğiniz bir boole değeri gerektirir:

<input :disabled="validated" />

Ben sadece eğer kontrol ettik dikkat edin validated- Bu gibi çalışmalıdır 0 is falsey... eg

0 is considered to be false in JS (like undefined or null)

1 is in fact considered to be true

Daha dikkatli olmak için şunu deneyin: <input :disabled="!!validated" />

Bu çift olumsuzluk döner falseyya da truthydeğerini 0ya da 1hiçfalse ya datrue

bana inanmıyor musun konsolunuza gidin ve yazın !!0veya !!1:-)

Ayrıca, emin numaranızı yapmak 1veya 0kesinlikle Number olarak değil içinden geliyor dize '1'veya '0'bir ile kontrol ediyoruz değerini önceden PEND +örneğin <input :disabled="!!+validated"/>bir sayısı örneğin içine bu dönüşler Bir sayının bir dize

+1 = 1 +'1' = 1 David Morrow'un yukarıda söylediği gibi, koşullu mantığınızı bir yönteme koyabilirsiniz - bu size daha okunabilir bir kod verir - kontrol etmek istediğiniz koşulu yöntemden çıkarmanız yeterlidir.

Sen işleyebilirsiniz :disablediçinde niteliğini vue.js .

Bir boole kabul eder, eğer doğruysa , giriş devre dışı kalır, aksi takdirde etkinleştirilir ...

Örneğin sizin durumunuzda aşağıdaki gibi yapılandırılmış bir şey:

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

Aşağıdakileri de okuyun:

JavaScript İfadesi ile Giriş Öğelerini Koşullu Olarak Devre Dışı Bırakma

Giriş öğelerini bir JavaScript ifadesiyle satır içinde koşullu olarak devre dışı bırakabilirsiniz. Bu kompakt yaklaşım, basit koşullu mantığı uygulamak için hızlı bir yol sağlar. Örneğin, yalnızca şifrenin uzunluğunu kontrol etmeniz gerekiyorsa, böyle bir şey yapmayı düşünebilirsiniz.

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

Hesaplanan bir özellik oluşturabilir ve değerine göre herhangi bir form türünü etkinleştirebilir / devre dışı bırakabilirsiniz.

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>

Bunu dene

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

Girişin devre dışı özelliğini değiştirmek için şaşırtıcı derecede karmaşıktı. Benim için sorun iki yönlü oldu:

(1) Unutmayın: girişin "devre dışı" özelliği bir Boolean özelliği DEĞİLDİR .
Sadece varlığı özelliği aracının giriş devre dışı bırakılır.

Ancak, Vue.js içerik oluşturucuları bunu hazırladı ... https://vuejs.org/v2/guide/syntax.html#Attributes

(Bunun için @connexo'ya teşekkürler ... vuejs'de giriş metnine devre dışı bırakılmış özellik nasıl eklenir? )

(2) Ayrıca, sahip olduğum bir DOM zamanlaması yeniden oluşturma sorunu vardı. Geri dönmeye çalıştığımda DOM güncellenmiyordu.

Belirli durumlarda, "bileşen hemen yeniden oluşturulmayacak. Bir sonraki" onay işaretinde "güncellenecektir."

Vue.js belgelerinden: https://vuejs.org/v2/guide/reactivity.html

Çözüm:

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

Fuller örnek iş akışı:

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

Bu ekleme koşulunu kullanabilir.

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

ES6 Setlerinin / Haritalarının, yazarken anlayabildiğim kadarıyla reaktif görünmediğini unutmayın.