[Vuejs]-Data state with multiple values but only one can be to true in a Vue app

by

2👍

✅

You could turn payment into a computed property and use a selectedPayment type.

payment(){
  return {
    cc: this.selectedPayment === 'cc',
    paypal: this.selectedPayment === 'paypal',
    iban: this.selectedPayment === 'iban'
  }
}

Example.

console.clear()
new Vue({
  el: "#app",
  data: {
    selectedPayment: null,
  },
  computed: {
    payment(){
      return {
        cc: this.selectedPayment === 'cc',
        paypal: this.selectedPayment === 'paypal',
        iban: this.selectedPayment === 'iban'
      }
    }
  },
  methods:{
    onSelectPayment(type){
      this.selectedPayment = type
      // do other stuff. If you need the payment, it is available
      // as this.payment
    }
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<div id="app">
  Payment: {{payment}}
  <hr>
  <button @click="onSelectPayment('cc')">CC</button>
  <button @click="onSelectPayment('paypal')">PayPal</button>
  <button @click="onSelectPayment('iban')">Iban</button>
</div>
👤Bert

Leave a comment