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>

Любые идеи?

Ответ 1

Try:

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

Ответ 2

Простейшая форма:

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

Ответ 3

<input :required="condition">

Вам не нужно <input :required="test ? true : false">, потому что если test правдиво, вы уже получите атрибут required, а если test будет ложным, вы не будете получить атрибут. Элемент 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">

Ответ 4

Я прошел через ту же проблему, и попробовал вышеуказанные решения! Да, я не вижу 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 по default-value а также пропустить проверку. Пропущенные undefined работы, хотя!

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

Это работает, и моя детская опора имеет значение по умолчанию.