V-if imbriqués


#1

Je débute avec vue.js et pour ma première fonction, je voulais tenter un truc assez simple.

J’ai une première div “contact” avec un button qui au click est remplacé par une autre div “contactchoice” (et vice versa)
Jusque là tout va bien et ça fonctionne.

Dans le div contact choice, j’ai deux options :

  • Voir l’email
  • Voir le téléphone

Comme vous l’imaginez, je voudrais afficher l’email ou le tel au click. J’ai repris le même principe, mais je voulais savoir si c’était une bonne façon de faire ?
Voici le code : https://codepen.io/waf-alors/pen/QzJVdg


#2

Tous tes boolean sont en double. ex: isContact === !isContactChoice

Tu pourrais utilser un seul boolean : v-if="isContact" / v-if="!isContact"

ou tu peux utiliser v-if / v-else pour afficher l’un ou l’autre.


#3

Super, merci pour la facto, c’est vrai que c’est plus simple et plus lisible. Par contre j’ai un autre souci (en terme d’accessibilité).
Par exemple mon numéro de téléphone est dans un button et si le contenu du span change bien, j’aimerais englober l’ensemble du button pour le click soit plus facile.

      <button class="contact-button">
        <div class="contact-icon">
          <%= image_tag("/assets/phone-call.svg",  alt: "like", class: "icon") %>
        </div>
          <span v-if="isTel" v-on:click="click_tel"><%= t('sleeps.show.see_number') %></span>
          <span v-if="!isTel"><%= link_to @sleep.phone, "tel:#{@sleep.phone}" %></span>
      </button>

Est ce que je dois dupliquer le button avec les deux états ? J’ai bien tenté, mais le v-if dans la balise button ne fontionne pas… ou est ce qu’il existe une autre manière de faire ?


#4

Les v-if peuvent se mettre sur n’importe quel tag.

Un bouton qui contient un lien c’est bizarre. Tu pourrais utiliser un <component> pour switcher entre <a> et <button> par ex.