im new with vue : is there a better way and short cod for this mess down :

 <div    :  @click="chk1()" >
 Opencart <small>(soon)</small>
</div>
<div  : @click="chk2()" >
<img src="../../assets/images/wooLogo.png" >
 Woocommerce
</div>
<div  : @click="chk3()" >
<img src="../../assets/images/shopify.png" width="80"> 
Shopify
</div>

  data(){
    return{
      isOc: false,
      isWo: false,
      isSo: false,
      platforms:{ selected: null} 
    }
  },
  methods:{
    
    chk1(){
      this.isOc = true
      this.isWo = false
      this.isSo = false
      this.platforms.selected = 'oc';
      console.log(this.platforms.selected);
    },
    chk2(){
     
      this.isOc = false
      this.isWo = true
      this.isSo = false
      this.platforms.selected = 'woo';
      console.log(this.platforms.selected);

    },
    chk3(){
      this.isOc = false
      this.isWo = false
      this.isSo = true
      this.platforms.selected = 'shopify';
      console.log(this.platforms.selected);

    }

i am wondering that, is there best way for write that code above in vue in better way.. without using vue3 composition api

CodePudding user response：

Do you really need one variable by plaform? Why don't you use only one which could be either "" (no platform selected), "oc", "woo" or "shopify". Also I would use juste one method and provide it with an argument like so:

<div  : @click="handleClick('oc')" >
    Opencart <small>(soon)</small>
</div>
<div  : @click="handleClick('woo')" >
    <img src="../../assets/images/wooLogo.png" >
    Woocommerce
</div>
<div  : @click="handleClick('shopify')" >
    <img src="../../assets/images/shopify.png" width="80"> 
    Shopify
</div>

  data() {
    return {
      selectedPlatform: ""
    }
  },
  methods: {
    handleClick(selectedPlatform) {
      this.selectedPlatform = selectedPlatform;
    }
  }