VueJS warunkowo dodaje atrybut do elementu

W VueJS możemy dodać lub usunąć element DOM za pomocą v-if:

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

ale czy istnieje sposób na dodanie / usunięcie atrybutów elementu dom, np. dla następującego warunkowego ustawienia wymaganego atrybutu:

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

przez coś podobnego do:

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

Jakieś pomysły?

Próbować:

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

Najprostsza forma:

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

<input :required="condition">

Nie potrzebujesz, <input :required="test ? true : false">ponieważ jeśli test jest prawdziwy , otrzymasz już requiredatrybut, a jeśli test jest fałszywy , nie otrzymasz atrybutu. true : falseCzęść jest zbędna, podobnie jak to ...

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

Najprostszym sposobem wykonania tego wiązania jest więc <input :required="condition">

Tylko jeśli test (lub warunek ) może zostać źle zinterpretowany, musisz zrobić coś innego; w takim przypadku użycie przez Syeda załatwia sprawę !!.
  <input :required="!!condition">

Możesz przejść booleanprzez wymuszenie, wstawienie go !!przed zmienną.

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

Chciałbym jednak zwrócić uwagę na następujący przypadek, w którym komponent odbierający zdefiniował typedla rekwizytów. W takim przypadku, jeśli isRequiredzdefiniowano typ do stringprzejścia , spraw, booleanże sprawdzenie typu nie powiedzie się, a otrzymasz ostrzeżenie Vue. Aby to naprawić, możesz chcieć uniknąć przekazywania tej właściwości, więc po prostu undefinedustaw rezerwę, a prop nie zostanie wysłany docomponent

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

Wyjaśnienie

Przeszedłem przez ten sam problem i wypróbowałem powyższe rozwiązania !! Tak, nie widzę, propale to faktycznie nie spełnia tego, czego tutaj wymagamy.

Mój problem -

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

W powyższym przypadku spodziewałem się, że nie my-propzostanie przekazany do komponentu podrzędnego - <any-conponent/>nie widzę wejścia, ale propw DOMmoim <any-component/>komponencie wyskakuje błąd z niepowodzenia sprawdzania typu właściwości. Podobnie jak w przypadku komponentu podrzędnego, spodziewam my-propsię, że będzie to, Stringale tak jest boolean.

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

Co oznacza, że ​​komponent potomny otrzymał prop, nawet jeśli tak jest false. Ulepszenie tutaj polega na umożliwieniu komponentowi podrzędnemu przejęcia, default-valuea także pominięciu sprawdzania. Zdane undefinedjednak działa!

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

To działa, a mój atrybut podrzędny ma wartość domyślną.

W html użyj

<input :required="condition" />

I zdefiniuj we właściwościach danych, takich jak

data () {
   return {
      condition: false
   }
}