如何将值从函数传递到 VueJs 中的变量？

Question

我正在获取图片网址的 base64。当我将getImage 函数传递给savepdf函数并尝试将回调函数 base64_data 存储在变量中时，它会引发错误无法设置 undefined 的属性“base64logo”。如何将值从回调函数传递给变量？希望你能理解我的问题。          data() {            return {               base64logo: '',            }           },            methods: {            getImage(url, callback) {                var img = new Image();                img.crossOrigin = 'Anonymous';                img.onload = function () {                    var canvas = document.createElement('CANVAS');                    console.log('canvas', canvas)                    var ctx = canvas.getContext('2d');                    var dataURL;                    canvas.height = this.height;                    canvas.width = this.width;                    ctx.drawImage(this, 0, 0);                    dataURL = canvas.toDataURL();                    callback(dataURL);                    canvas = null;                };                img.src = url;            },            savepdf() {                this.getImage(this.clientDetails.company_logo, function (base64_data) {                    console.log('base64_data', base64_data);                    this.base64logo = base64_data; //Error HERE                });                     var doc = new jsPDF('p', 'pt', 'a4');                    doc.setFontSize(9);                    doc.addImage(this.base64logo, 'PNG', 150, 10, 40, 20); //Have to pass here.              }       }

Answer 1

您应该使用箭头函数()=>{...}来访问this组件实例：

 this.getImage(this.clientDetails.company_logo,  (base64_data) =>{

                    console.log('base64_data', base64_data);

                    this.base64logo = base64_data; //Now you could access this

                });

或分配this给全局变量：

let that=this

 this.getImage(this.clientDetails.company_logo,  function(base64_data){

                    console.log('base64_data', base64_data);

                    that.base64logo = base64_data; //Now you could access this

                });