VueJS koşullu olarak bir öğe için bir öznitelik ekler

VueJS'de v-if kullanarak bir DOM öğesi ekleyebilir veya kaldırabiliriz:

<button v-if="isRequired">Important Button</button>

ancak bir dom öğesinin niteliklerini eklemenin / kaldırmanın bir yolu var mı, örneğin aşağıdaki için gerekli özniteliği koşullu olarak ayarlamak için:

Username: <input type="text" name="username" required>

şuna benzer bir şeyle:

Username: <input type="text" name="username" v-if="name.required" required>

Herhangi bir fikir?

Deneyin:

<input :required="test ? true : false">

En basit hal:

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false

<input :required="condition">

Buna gerek yok <input :required="test ? true : false">çünkü eğer testi olduğunu truthy zaten alırsınız requiredniteliği ve eğer deney olduğunu falsy sen niteliğini almazsınız. true : falseKısmı çok bu gibi gereksiz olduğunu ...

if (condition) {
    return true;
} else {
    return false;
}
// or this...
return condition ? true : false;
// can *always* be replaced by...
return (condition); // parentheses generally not needed

Bu bağlamayı yapmanın en basit yolu, o halde, <input :required="condition">

Yalnızca test (veya koşul ) yanlış yorumlanabilirse başka bir şey yapmanız gerekir; bu durumda Syed'in kullanımı işe yarar !!.
  <input :required="!!condition">

Değişkenin önüne booleankoyarak onu zorlayarak geçebilirsiniz !!.

let isRequired = '' || null || undefined
<input :required="!!isRequired"> // it will coerce value to respective boolean 

Ancak, alıcı bileşenin typesahne donanımı için tanımladığı aşağıdaki durum için dikkatinizi çekmek isterim . Bu durumda, eğer isRequiredtanımlanmış tip varsa , stringo zaman geçmek booleaniçin tip kontrolü başarısız olur ve Vue uyarısı alırsınız. Bu pervaneyi geçmekten kaçınmak isteyebileceğinizi düzeltmek için, sadece undefinedgeri dönüşü koyun ve pervane gönderilmeyecektir.component

let isValue = false
<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>

açıklama

Aynı sorunu yaşadım ve yukarıdaki çözümleri denedim !! Evet, görmüyorum propama bu aslında burada gerekeni yerine getirmiyor.

Benim sorunum -

let isValid = false
<any-component
  :my-prop="isValue ? 'Hey I am when the value exist': false"
/>

Yukarıdaki durumda, beklediğim şey my-propalt bileşene geçmemiş olmaktır - girişi <any-conponent/>görmüyorum ama bileşenimde, prop tipi kontrol arızasından bir hata çıkıyor. Çocuk bileşeninde olduğu gibi, bir olmayı bekliyorum ama öyle .propDOM<any-component/>my-propStringboolean

myProp : {
 type: String,
 required: false,
 default: ''
}

Bu, alt bileşenin, öyle olsa bile pervaneyi aldığı anlamına gelir false. Buradaki ince ayar, alt bileşenin default-valuekontrolü almasına ve ayrıca kontrolü atlamasına izin vermektir . undefinedYine de geçti !

<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>
 

Bu işe yarıyor ve benim alt öğem varsayılan değere sahip.

Html kullanımında

<input :required="condition" />

Ve veri özelliğinde şöyle tanımlayın:

data () {
   return {
      condition: false
   }
}