V-if avec un lien et ux

Je voudrais faire quelque chose, qui semble assez simple, mais sur lequel je bute :

J’ai un premier stade, où j’ai un bouton avec deux états :slight_smile:

le premier avec v-if="!showTel"

le deuxième avec v-if=“showTel”

Au clic, le numéro est affiché… mais j’ai un souci :
Dans le deuxième état, je voudrais qu’il affiche un lien cliquable de type : a href=“tel:0665000000” mais que ce soit l’ensemble de la box qui soit cliquable (pas seulement le numéro). Même chose pour le premier état, je voudrais aussi, que ce soit l’ensemble du boutton qui soit cliquable.

Voilà ce que j’ai fait, mais qui ne marche pas :

<div class="wrapper" @click="click_tel">
  <div id="showTel" class="showTel">
    <div class="box1">
      <i class="icon icon-phone-call"></i>
      <div class="boxContent" v-if="!showTel">
       <p>Téléphone mobile</p><span>Cliquez pour voir le numéro</span>
    </div>
  </div>
  <a href="tel:#{@sleep.phone}" class="box2"  v-if="!showTel">
    <div><%= @sleep.phone %></div>
  </a>
</div>

Une solution est de gérer les deux états à partir d’un même bloc parent (le wrapper).
Quand l’utilisateur clique sur ce wrapper l’action est différente en fonction du fait que le numéro soit visible ou non :

  • dans le cas ou le numéro n’est pas visible, on le rend visible
  • dans le cas ou le numéro est visible, on se sert d’une référence au lien pour cliquer dessus programatiquement :
    <template>
      <div @click="handleClick" class="wrapper">
        <!-- Le numéro est caché -->
        <div v-if="!isNumberVisible">
          Cliquez pour voir le numéro
        </div>

        <!-- Le numéro est visible -->
        <div v-if="isNumberVisible">
          <a :href="`tel:${phoneNumber}`" ref="phoneNumber">{{ phoneNumber }}</a>
        </div>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          isNumberVisible: false
        };
      },

      computed: {
        phoneNumber() {
          // fetch()... implémenter logique de récupération du numéro
          return "+33 6 65 00 00";
        }
      },

      methods: {
        handleClick() {
          if (!this.isNumberVisible) {
            return (this.isNumberVisible = true);
          } else {
            this.$refs.phoneNumber.click();
          }
        }
      }
    };
    </script>

    <style scoped>
    .wrapper {
      display: flex;
      padding: 20px;
      color: white;
      background-color: green;
      width: 400px;
      cursor: pointer;

      /* etc. */
    }
    </style>