vuejs use if statement inside @click event

Question

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

I am using npmjs.com/package/platform for detecting platform — Rejoanul Alam
– Rejoanul Alam, Commented Jan 14, 2019 at 5:03
Ok, so how are you assigning it to your Vue / component instance's platform property for use in the template? — Phil
– Phil, Commented Jan 14, 2019 at 5:21
Also, what do you mean by "My platform object not usable inside function"? — Phil
– Phil, Commented Jan 14, 2019 at 5:24
@Phil Thanks for your effort. I have found a solution. However platform was loaded in parent component but not working in iOS only — Rejoanul Alam
– Rejoanul Alam, Commented Jan 14, 2019 at 5:26

tony19 · Accepted Answer · 2022-07-15 21:47:48Z

3

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' ]
}

edited Jul 15, 2022 at 21:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 14, 2019 at 5:29

Yom T.

9,1982 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rejoanul Alam · Accepted Answer · 2019-01-14 05:25:37Z

0

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.

answered Jan 14, 2019 at 5:25

Rejoanul Alam

5,4004 gold badges42 silver badges71 bronze badges

Collectives™ on Stack Overflow

vuejs use if statement inside @click event

2 Answers 2

Edit

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related