Choix_Mode_Variante.vue

<template>
<div>

  <div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix">
    <div id = "contenusPanier" v-bind:class="{'clicked': contenuPanier, 'nonClicked': !contenuPanier}">
      <p>Panier</p>
    </div>

    <div id = "contenusBanque" v-bind:class="{'clicked': !contenuPanier, 'nonClicked': contenuPanier}">
      <p>Banque</p>
    </div>

  </div>

</div>
</template>

<script>
export default {
  name: "Choix_Mode_Variante",
  data: function () {
    return {
      contenuPanier: true,
    }
  },
  methods: {
    changerChoix: function () {
      this.contenuPanier = !this.contenuPanier
      this.$emit("mode_choisi", {mode: this.contenuPanier})
    },
  }
}
</script>

<style scoped>
#choixDuMode {
  border: 1px solid black;
  width: 250px;
  display: flex;
}

#contenusPanier, #contenusBanque {

  width: 125px;
  text-align: center;
}

.nonClicked {
  outline: 1px solid black;
}

.clicked {
  outline: 5px solid yellow;
}
</style>