Javascript VueJS从另一个方法访问变量

我使用的是Vuejs，我有两种方法，一种是打电话，另一种是

挂断

我想从

hangup

错误：

无法在eval设置未定义的属性“device”

这是我的代码：

    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>

导出默认值{
组件：{Modal}，
数据：（）=>({
设备：“”，
showModal：错，
表格：{
输出：“”
},
收藏：{
}
}),
创建（）{
},
方法：{
init（）{
this.showModal=true
},
拨号器（数字）{
this.form.output+=`${digit}`
这个，伯爵++
},
清除屏幕（）{
let screen=document.getElementById（'output'）.value
this.form.output=screen.slice（0，-1）
},
挂断{
this.device.disconnectAll（）；
},
makeCall（）{
log（“请求访问令牌…”）；
//使用相对链接访问语音令牌功能
getAPI.get（“api/contacts/token/”）
.然后（功能（响应）{
log（“得到一个令牌”）；
log（“令牌：+response.data.Token”）；
//设置Twilio.Device
this.device=新的Twilio.device（response.data.token{
//将Opus设置为我们的首选编解码器。Opus通常性能更好，需要更少的带宽和带宽
//在受限网络条件下提供更好的音频质量。Opus将在2.0中默认。
编解码器首选项：[“opus”、“pcmu”]，
//在客户端使用假的DTMF音。真实音仍会发送到通话的另一端，
//但是客户端DTMF音调是假的。这会阻止本地麦克风捕捉DTMF音调
//第二次并发送两次提示音。这将是2.0中的默认设置。
fakeLocalDTMF：没错，
//使用“enableRingingState”可使设备发出“铃声”`
//TwiML后端还需要具有该属性
//'Dial'动词中的'answerOnBridge'也设置为true。此选项
//更改SDK的行为以考虑调用“振铃”启动
//从与TwiML后端的连接到
//“拨号”动词回答。
启用状态：true，
是的，
});
此.device.on（“就绪”，功能（设备）{
log（“Twilio.deviceready！”）；
});
此.device.on（“错误”），函数（错误）{
console.log（“Twilio.Device Error:+Error.message”）；
});
此.device.on（“连接”）功能（conn）{
log（'Successfully-builded call！'）；
//$（“#正在进行模式调用”）.modal（'show'）
});
此设备打开（“断开”），功能（连接）{
log（“呼叫结束”）；
//$（'.modal'）.modal（'hide'））
});
变量参数={
收件人：document.getElementById（'output'）。值
};
log（“调用我”+document.getElementById（'output'）.value+”）；
如果（本设备）{
var outgoingConnection=this.device.connect（参数）；
outgoingConnection.on（“铃声”），函数（）{
控制台日志（“铃声…”）；
});
}
})
.catch（函数（err）{
控制台日志（err）；
log（“无法从服务器获取令牌！”）；
});
}
}
}

该错误是由于JS中的工作方式造成的。promise中的函数声明在此上下文中创建了一个与主函数不同的函数。

函数

关键字根据调用位置设置

此

，而箭头函数根据在代码中定义的位置设置

此

您所需要做的就是替换getAPI promise

中的
函数（response）{}
声明。然后用arrow函数替换
，它就可以正常工作了

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

尝试替换这些行-要在中使用箭头函数，请在数据中定义设备变量，然后使用此设备访问它。YashMaheshwari已尝试过，但我得到了一个error@YashMaheshwari：无法在评估时设置未定义的属性“device”（dialPad.vue？8963:167）我现在正在更新我的问题，请在makeCall（）方法中尝试
var self=this
，然后使用
self.device
而不是
this.device
。此外，如果不想使用上述解决方案，请在从api获取响应时使用arrow函数。