Vue.js: ne restituez pas les attributs si la valeur est vide (par exemple: to = "" or type = "")
J'ai un composant Button qui rend un lien nuxt ou un bouton selon que vous fournissez un attribut comme to ou type.
<div class="Btn">
<component
:class="['Btn__button', createAppearanceClasses]"
v-on:click="click"
:disabled="disabled"
:is="type"
:to="to"
:href="external ? to : false"
:target="target"
:type="buttonType"
>
<slot />
</component>
</div>
(Alors que type est une propriété calculée pour renvoyer un nuxt-link pour les liens internes, une balise a s'il s'agit d'un lien externe ou button si ces propriétés ne sont pas définies)
Maintenant, nous rendons parfois certains boutons qui ouvrent un modal ou le soumettent. Là on ne passe aucun type ni à attribuer:
<Btn :class="'FlexContent__button'"
:appearance="['rounded-corners']"
v-on:click.native="openOverlay"
>
{{ component.text }}
</Btn>
Dans le HTML rendu, j'obtiens:
<button disabled to="" target="" type="" class="Btn__button Btn__button--rounded-corners">
Si je valide cela, j'obtiens des erreurs concernant ces attributs vides: Attribute to not allowed on element button at this point.
Comment puis-je rendre l'attribut to="" uniquement si une valeur réelle est transmise au composant Btn?
Je pensais à quelque chose comme ça, mais cela ne fonctionne pas: (to ? ':to="to"' : '') J'ai donc besoin d'une autre solution pour cela.
Merci d'avance pour les indices.
à votre santé
Tout attribut lié à l'aide de v-bind à une valeur nulle, non définie ou fausse ne sera pas rendue dans l'élément.