vuejs использует оператор if внутри события @click

Question

У меня есть ссылка как

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

Я хочу добавить оператор if на основе устройства и изменить имя функции. Я пробовал как

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

и

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

ничего не работает. Мой platform объект не может использоваться внутри функции, поэтому я пытаюсь использовать его в href. Что я делаю не так

Answer 1

Для сложной условной логики вам, вероятно, следует использовать метод, а не полагаться на встроенную оценку:

<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() {

  }
}

Редактировать

Если экземпляр platform принадлежит родителю, вы можете provide передать его дочернему компоненту:

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

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

Answer 2

Исправлено окончательно. Я использую

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

на моих компонентах и ​​теперь работает нормально. Однако без него platform работает везде, но не работает только в веб-браузере iOS.