CODEWITHSUNDEEP
vue.jsvuejs2
Rejoanul Alam
Rejoanul Alam

Reputation: 5398

vuejs use if statement inside @click event

I have a link like 

<a class="nav-link" data-toggle="modal" data-target="#testModal" @click="platform.os.family == 'iOS' ? showSettingiOS() : showSetting()">Test</a>

I want to add if statement based on device & change function name. I have tried as 

@click="platform.os.family == 'iOS' ? showSettingiOS() : showSetting()"

and

@click="platform.os.family == 'iOS' ? 'showSettingiOS()' : 'showSetting()'"

nothing worked. My platform object not usable inside function this is why I am trying using at href. What I am doing wrong

Upvotes: 0

Views: 1562

Answers (2)

Yom T.
Yom T.

Reputation: 9200

For complex, conditional logic, you should probably use a method instead of relying on inline evaluation:

<a class="nav-link" data-toggle="modal" data-target="#testModal" @click="click">Test</a>

methods: {
  click() {
    if (this.platform.os.family === 'iOS') {
      this.showSettingiOS();
    } 
    else {
      this.showSetting();
    }
  },

  showSettingiOS() {
    
  },
  showSetting() {
    
  }
}

Edit

If the instance of platform is of the parent's, you could provide it to the child component:

// Parent
{
  provide() {
    return {
      platform
    }
  }
}

// Child    
{
  inject: [ 'platform' ]
}

Upvotes: 3

Rejoanul Alam
Rejoanul Alam

Reputation: 5398

It is fixed finally. I use 

computed: {
    platform: () => platform,
},

at my component hooks & working fine now. However without it platform working everywhere but not working on only in iOS webview.

Upvotes: 0

Related Questions