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">потому что если тест является truthy вы уже получаете requiredатрибут, и если тест является falsy вы не получите атрибут. 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">

Только если тест (или условие ) может быть неправильно истолкован, вам нужно будет сделать что-то еще; в этом случае использование Сайеда !!делает свое дело .
  <input :required="!!condition">

Вы можете передать booleanего принудительно, поставив !!перед переменной.

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

Но я хотел бы обратить ваше внимание на следующий случай, когда принимающий компонент определен typeдля props. В этом случае, если для 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
   }
}