javascript - 访问从 jQuery 加载返回的数据

Question

我正在开发一个 vue.js 组件，我有这个计算属性:

 loading_asset_status(){
        var img = $("img.modal-main-image").attr('src', this.current_image.img_url)
            .on('load', function() {
               return (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0);
            });
        return img;
    }

计算属性需要返回从加载函数返回的 true 或 false，但 img 变量包含 jQuery DOM 对象，而不是我想要的 true 或 false。所以这是行不通的。

我也试过这个:

loading_asset_status(){
        var status;
        var img = $("img.modal-main-image").attr('src', this.current_image.img_url)
            .on('load', function() {
                status = (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0);
            });
        return status;
    }

但是这个返回未定义。有什么解决办法吗？

Answer 1

它没有返回状态，因为这是异步的，你甚至在 .on 中的代码仍在执行之前就已经返回了。

但是你可以像这样设置一个数据变量:

loading_asset_status(){
        var img = $("img.modal-main-image").attr('src', this.current_image.img_url)
            .on('load', () => {
                this.status = (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0);
            });
    }

您必须在 vue 实例的数据部分定义状态。