VueJS secara kondisional menambahkan atribut untuk sebuah elemen

Di VueJS kita dapat menambah atau menghapus elemen DOM menggunakan v-if:

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

tetapi adakah cara untuk menambah / menghapus atribut dari elemen dom misalnya untuk menetapkan atribut yang diperlukan berikut ini secara bersyarat:

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

dengan sesuatu yang mirip dengan:

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

Ada ide?

Mencoba:

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

Bentuk paling sederhana:

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

<input :required="condition">

Anda tidak perlu <input :required="test ? true : false">karena jika tes adalah truthy Anda sudah mendapatkan requiredatribut, dan jika tes adalah falsy Anda tidak akan mendapatkan atribut. The true : falseBagian berlebihan, seperti ini ...

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

Maka, cara paling sederhana untuk melakukan pengikatan ini adalah <input :required="condition">

Hanya jika tes (atau kondisi ) dapat disalahartikan, Anda perlu melakukan sesuatu yang lain; dalam hal ini, penggunaan Syed akan berhasil !!.
  <input :required="!!condition">

Anda bisa melewatkannya booleandengan memaksakannya, letakkan di !!depan variabel.

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

Tetapi saya ingin menarik perhatian Anda untuk kasus berikut di mana komponen penerima telah ditentukan typeuntuk props. Dalam hal ini, jika isRequiredtelah ditentukan tipe untuk menjadi stringmaka melewati booleanpemeriksaan tipe membuatnya gagal dan Anda akan mendapatkan peringatan Vue. Untuk memperbaikinya Anda mungkin ingin menghindari melewatkan prop itu, jadi letakkan saja undefinedfallback dan prop tidak akan dikirim kecomponent

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

Penjelasan

Saya telah melalui masalah yang sama, dan mencoba solusi di atas !! Ya, saya tidak melihat proptetapi itu sebenarnya tidak memenuhi apa yang diminta di sini.

Masalahku -

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

Dalam kasus di atas, apa yang saya harapkan adalah tidak my-propditeruskan ke komponen anak - <any-conponent/>Saya tidak melihat bagian propdalam DOMtetapi Dalam <any-component/>komponen saya , kesalahan muncul dari kegagalan pemeriksaan tipe prop. Seperti pada komponen anak, saya mengharapkan my-propmenjadi Stringtetapi sebenarnya boolean.

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

Yang berarti bahwa komponen anak menerima prop meskipun itu false. Tweak di sini adalah membiarkan komponen anak mengambil default-valuedan juga melewati pemeriksaan. Lulus undefinedbekerja!

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

Ini berfungsi dan prop anak saya memiliki nilai default.

Dalam penggunaan html

<input :required="condition" />

Dan tentukan dalam properti data seperti

data () {
   return {
      condition: false
   }
}