VueJS умовно додає атрибут для елемента

У VueJS ми можемо додати або видалити елемент DOM за допомогою v-if:

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

але чи є спосіб додати / видалити атрибути елемента dom, наприклад для наступного умовно встановленого необхідного атрибута:

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

чимось схожим на:

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

Якісь ідеї?

Спробуйте:

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

Найпростіша форма:

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

<input :required="condition">

Вам це не потрібно, <input :required="test ? true : false">тому що якщо тест є надійним, ви вже отримаєте requiredатрибут, а якщо тест - хибний, ви не отримаєте атрибут. true : falseЧастина є зайвою, оскільки ж, як це ...

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

Тоді найпростіший спосіб зробити це зв’язування <input :required="condition">

Тільки якщо тест (або умова ) можна неправильно трактувати, вам потрібно буде зробити щось інше; у такому випадку використання Syed !!виконує трюк.
  <input :required="!!condition">

Ви можете пройти boolean, примусивши його, поставити !!перед змінною.

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

Але я хотів би звернути вашу увагу на наступний випадок, коли приймаючий компонент визначив typeдля реквізиту. У такому випадку, якщо isRequiredвизначений тип, який потрібно stringпередати, booleanзробіть його перевірку на помилку, і ви отримаєте попередження Vue. Щоб виправити те, що ви можете уникнути передачі реквізиту, просто поставте undefinedрезервний запас, і реквізит не буде надісланийcomponent

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

Пояснення

Я пережив ту ж проблему і спробував вище рішення !! Так, я не бачу, propале це насправді не відповідає тому, що тут потрібно.

Моя проблема -

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

У вищенаведеному випадку я очікував, що не my-propперейде до дочірнього компонента - <any-conponent/>я не бачу propв, DOMале в моєму <any-component/>компоненті виникла помилка перевірки типу перевірки. Як і в дочірній складовій, я очікую my-propбути такою, Stringале вона є boolean.

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

Що означає, що дочірній компонент отримав опору, навіть якщо вона є false. Налаштуйте тут, щоб дозволити дочірньому компоненту взяти default-valueі також пропустити чек. undefinedХоча роботи пройшли !

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

Це працює, і моє дочірнє опора має значення за замовчуванням.

У використанні html

<input :required="condition" />

І визначити у властивості даних, як

data () {
   return {
      condition: false
   }
}