VueJS access to a variable from another method

Question

I'm using Vuejs and i would i have two methods one is to make a call and another one is to hangup

i would like to access to device variable that i have in makeCall methods from hangup

error : Cannot set property 'device' of undefined at eval

this is my code :

    export default {
    components: {Modal},
    data: () => ({
        device: '',
        showModal: false,
        form:{
            output: ''
        },
        collection: {
        }
    }),
    created(){
        
    },
    methods: {
        init(){
            this.showModal = true
        },
        dialer(digit){
            this.form.output += `${digit}`
            this.count++
        },
        clearScreen(){
            let screen = document.getElementById('output').value
            this.form.output = screen.slice(0, -1)
        },
        hangUp(){
          this.device.disconnectAll();
        },
        makeCall(){
            console.log("Requesting Access Token...");
            // Using a relative link to access the Voice Token function
            getAPI.get("api/contacts/token/")
                .then(function (response) {
                    console.log("Got a token.");
                    console.log("Token: " + response.data.token);

                    // Setup Twilio.Device
                    this.device =  new Twilio.Device(response.data.token, {
                        // Set Opus as our preferred codec. Opus generally performs better, requiring less bandwidth and
                        // providing better audio quality in restrained network conditions. Opus will be default in 2.0.
                        codecPreferences: ["opus", "pcmu"],
                        // Use fake DTMF tones client-side. Real tones are still sent to the other end of the call,
                        // but the client-side DTMF tones are fake. This prevents the local mic capturing the DTMF tone
                        // a second time and sending the tone twice. This will be default in 2.0.
                        fakeLocalDTMF: true,
                        // Use `enableRingingState` to enable the device to emit the `ringing`
                        // state. The TwiML backend also needs to have the attribute
                        // `answerOnBridge` also set to true in the `Dial` verb. This option
                        // changes the behavior of the SDK to consider a call `ringing` starting
                        // from the connection to the TwiML backend to when the recipient of
                        // the `Dial` verb answers.
                        enableRingingState: true,
                        debug: true,
                    });

                    this.device.on("ready", function (device) {
                        console.log("Twilio.Device Ready!");
                    });

                    this.device.on("error", function (error) {
                        console.log("Twilio.Device Error: " + error.message);
                    });

                    this.device.on("connect", function (conn) {
                        console.log('Successfully established call ! ');
                    // $('#modal-call-in-progress').modal('show')
                    });

                    this.device.on("disconnect", function (conn) {
                        console.log("Call ended.");
                    // $('.modal').modal('hide')
                    });

                    var params = {
                      To: document.getElementById('output').value
                    };

                    console.log("Calling me " + document.getElementById('output').value + "...");
                    if (this.device) {
                        var outgoingConnection = this.device.connect(params);
                        outgoingConnection.on("ringing", function () {
                            console.log("Ringing...");
                        });
                    }

                    

                })
                .catch(function (err) {
                    console.log(err);
                    console.log("Could not get a token from server!");
                });

            }
    }
  }
</script>

Hi, Define the device variable in the data and then access it using `this.device`. — Yash Maheshwari, May 11 '21 at 02:40
@YashMaheshwari : Cannot set property 'device' of undefined at eval (dialPad.vue?8963:167) i'm updating my question now — , May 11 '21 at 02:47
Try `var self = this` in the makeCall() method and then use `self.device` instead of `this.device`. — Yash Maheshwari, May 11 '21 at 02:52
Also, if you don't want to go with above solution, use arrow function when fetching the response from the api. — Yash Maheshwari, May 11 '21 at 02:52
@YashMaheshwari the problem in hangup function not in makeCall() — , May 11 '21 at 02:56
@YashMaheshwari disconnectAll() its a function in Twilio Library — , May 11 '21 at 02:58
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/232195/discussion-between-yash-maheshwari-and-alice-munin). — Yash Maheshwari, May 11 '21 at 02:59

score 0 · Accepted Answer · answered May 11 '21 at 03:13

The error was due to how this works in JS. The function declaration in the promise was creating a different this context than the main function. The function keyword sets this based on where it is called, whereas arrow functions set this based on where it is defined in the code.

All you need to do is replace the function(response){} declaration in the getAPI promise .then with an arrow function, and it will work fine.

makeCall(){
console.log("Requesting Access Token...");
// Using a relative link to access the Voice Token function
getAPI.get("api/contacts/token/")
.then((response) => {

Try replacing these lines - to use an arrow function in the .then

VueJS access to a variable from another method

1 Answers1