如何将值从函数传递到 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                });