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

119

В 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>

Любые идеи?

Дон Смайт
источник
4
Хотя это не так очевидно (отсюда и путаница), документация на самом деле говорит, что если значение атрибута оценивается как ложное, тогда атрибут опускается ( vuejs.org/v2/guide/syntax.html#Attributes )
AlexanderB
На самом деле, говорится в документации атрибут не будет добавлен , если «... имеет значение null, undefinedили false» , который отличается от сценария JS оценивая значение ЛОЖЬ. Это означает, что пустая строка является ложной в JavaScript, но все же добавит атрибут в DOM. Чтобы предотвратить это, вы можете попробоватьv-bind:name="name || false"
Denilson Sá Maia
@AlexanderB Если это правда, как я могу явно передать falseдочернему компоненту через опору?
Брюс Сан,
@BruceSun, если атрибут в контексте "непреднамеренно" пропадает при присвоении ему значения false - попробуйте передать его как строку 'false'. В других случаях, когда вам нужно контролировать наличие не-логического атрибута html в элементе, вы можете использовать условный рендеринг, v-ifкак предлагается здесь: github.com/vuejs/vue/issues/7552#issuecomment-361395234
AlexanderB
@AlexanderB Я думаю, что должен исправить себя - я бы сказал, attributeно НЕ prop. Мы можем безопасно передать явное значение falseчерез свойство компонента, но НЕ через атрибут (который не распознается как свойство). Я прав?
Брюс Сан

Ответы:

128

Пытаться:

<input :required="test ? true : false">
Cymruu
источник
9
<input v-bind:required="test ? true : false">
Полная
8
anythingAtAll : ? true : false(или if (condition) { return true; } else { return false; }) на любом языке ... неприлично . Просто используйте return (condition)или, в данном случае,<input :required="test">
Стивен П.
5
если вы уверены , что переменная testявляется boolean, вы можете просто использовать:required="test"
strz
2
Обратите внимание, что это зависит от компонента! Возможно, если ваше свойство принимает Stringзначение, установив его, falseвы получите type checkошибку. Так что установите undefinedвместо false. docs
Traxo
использование :required="required"где requiredявляется логическим свойством компонента приводит к <el required = "required"> для меня
Эндрю Кастеллано
65

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

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false
Сайед
источник
1
Обратите внимание, что это зависит от компонента! Возможно, если ваше свойство принимает Stringзначение, установив его, falseвы получите type checkошибку. Так что установите undefinedвместо false. docs
Traxo
@ Выделил свой ответ двойными восклицательными знаками. !! Я никогда не видел такого синтаксиса до вчерашнего дня, и во время проверки кода я наткнулся на это: - <input :required="!!!recipe.checked" v-model="recipe.pieType"><select :required="!!!recipe.checked" v-model="recipe.ingredients" :options="ingredients"></select> Вы знаете, что !!!(3) означает для :requiredзначения? Спасибо.
Chris22
2
@ Chris22 Нет разницы между! Test и !!! test, так как !!! test - это просто !! (! Test) и поскольку! Test является логическим, !! (! Test) - это просто его двойное отрицание, поэтому тем же. Проверьте это: stackoverflow.com/a/25318045/1292050
Сайед
@ Спасибо, спасибо. Перейдя по вашей ссылке, я нашел и эту и согласен . : ^)
Chris22
То, что сказал @Syed, не соответствует действительности
goodson
16

<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">

Стивен П.
источник
11

Вы можете передать 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"
/>
 

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

Сатьям Патхак
источник
2

В использовании html

<input :required="condition" />

И определите в свойстве данных, например

data () {
   return {
      condition: false
   }
}
Нипун Джайн
источник