Как прикрепить событие к переменной в vuejs

Question

Я пытаюсь реализовать Sip.js в моем проекте. Я создал переменную сеанса и сохранил сеанс в ней, но теперь мне нужно отследить событие в этой переменной сеанса, чтобы присоединить аудио в DOM. Как добавить прослушиватель событий в переменную.

Вот как выглядит мой код:

<template>
  <div> <button @click="callme">Call Me</button></div>
</template>
<script>
export default {
    data() {
      return {
          session: null,
          ua : null,
          }
      },
   methods: {
      callme(){
                this.session = this.ua.invite('sip:bob@example.com')   
        },
     },
  created(){
        this.ua= new SIP.UA({
                   uri: 'bob@example.onsip.com',
                   transportOptions: {
                    wsServers: ['wss://sip-ws.example.com']
                   },
                   authorizationUser: '',
                   password: ''
                  });
    }
   }

</script>

Теперь мне нужно послушать:

session.on('trackAdded', function() {

}

где я могу добавить это, когда trackAdded в сеансе будет запускать эту функцию?

Вот опция присоединения носителя согласно документации https://sipjs.com/guides/attach-media/

Answer 1

session и ua не должны устанавливаться в data() - они не должны отслеживаться Vue. Это не простые объекты данных :

Объект данных для экземпляра Vue.Vue рекурсивно преобразует свои свойства в методы получения / установки, чтобы сделать его «реактивным». Объект должен быть простым: собственные объекты, такие как объекты API браузера и свойства прототипа, игнорируются.Практическое правило заключается в том, что данные должны быть просто данными - не рекомендуется наблюдать объекты с их собственным поведением с сохранением состояния.

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

methods: {
    trackAddedEventHandler() {
        console.log('trackAdded Event!');
    },
    callme() {
        this.session = this.ua.invite('sip:bob@example.com');
        session.on('trackAdded', this.trackAddedEventHandler);
    },
},

Но на самом деле протестируйте это поведение, так как вы можете положиться на то, что Vue может не поддерживать, когда объект находится на data().