В 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>
Любые идеи?
javascript
vue.js
vuejs2
Дон Смайт
источник
источник
null
,undefined
илиfalse
» , который отличается от сценария JS оценивая значение ЛОЖЬ. Это означает, что пустая строка является ложной в JavaScript, но все же добавит атрибут в DOM. Чтобы предотвратить это, вы можете попробоватьv-bind:name="name || false"
false
дочернему компоненту через опору?'false'
. В других случаях, когда вам нужно контролировать наличие не-логического атрибута html в элементе, вы можете использовать условный рендеринг,v-if
как предлагается здесь: github.com/vuejs/vue/issues/7552#issuecomment-361395234attribute
но НЕprop
. Мы можем безопасно передать явное значениеfalse
через свойство компонента, но НЕ через атрибут (который не распознается как свойство). Я прав?Ответы:
Пытаться:
источник
<input v-bind:required="test ? true : false">
anythingAtAll : ? true : false
(илиif (condition) { return true; } else { return false; }
) на любом языке ... неприлично . Просто используйтеreturn (condition)
или, в данном случае,<input :required="test">
test
являетсяboolean
, вы можете просто использовать:required="test"
String
значение, установив его,false
вы получитеtype check
ошибку. Так что установитеundefined
вместо false. docs:required="required"
гдеrequired
является логическим свойством компонента приводит к <el required = "required"> для меняПростейшая форма:
источник
String
значение, установив его,false
вы получитеtype check
ошибку. Так что установитеundefined
вместо false. docs!!
Я никогда не видел такого синтаксиса до вчерашнего дня, и во время проверки кода я наткнулся на это: -<input :required="!!!recipe.checked" v-model="recipe.pieType"><select :required="!!!recipe.checked" v-model="recipe.ingredients" :options="ingredients"></select>
Вы знаете, что!!!
(3) означает для:required
значения? Спасибо.<input :required="condition">
Вам не нужно ,
<input :required="test ? true : false">
потому что если тест является truthy вы уже получаетеrequired
атрибут, и если тест является falsy вы не получите атрибут.true : false
Часть является излишней, так же, как это ...Тогда самый простой способ сделать эту привязку -
<input :required="condition">
Только если тест (или условие ) может быть неправильно истолкован, вам нужно будет сделать что-то еще; в этом случае использование Сайеда
!!
делает свое дело .<input :required="!!condition">
источник
Вы можете передать
boolean
его принудительно, поставив!!
перед переменной.Но я хотел бы обратить ваше внимание на следующий случай, когда принимающий компонент определен
type
для props. В этом случае, если дляisRequired
него определен тип,string
передачаboolean
проверки типа завершится ошибкой, и вы получите предупреждение Vue. Чтобы исправить это, вы можете не передавать эту опору, поэтому просто поставьтеundefined
запасной вариант, и опора не будет отправлена вcomponent
объяснение
Я столкнулся с той же проблемой и пробовал вышеуказанные решения !! Да, я не вижу,
prop
но это на самом деле не соответствует тому, что здесь требуется.Моя проблема -
В приведенном выше случае, что я ожидал , не будучи
my-prop
получить передается компоненту ребенка -<any-conponent/>
я не вижуprop
вDOM
но в моем<any-component/>
компоненте, ошибка выскакивает из строя проверки типа опоры. Как и в дочернем компоненте, я ожидаю,my-prop
чтоString
это будетboolean
.Это означает, что дочерний компонент получил опору, даже если это так
false
. Настройка состоит в том, чтобы позволить дочернему компоненту выполнятьdefault-value
проверку, а также пропускать ее. Сдалundefined
хоть работы!Это работает, и моя дочерняя опора имеет значение по умолчанию.
источник
В использовании html
И определите в свойстве данных, например
источник