使用 Enquire.js 和 Vue.js 来查询浏览器的大小答案

【问题标题】：Using Enquire.js with Vue.js to query about the browser's size使用 Enquire.js 和 Vue.js 来查询浏览器的大小
【发布时间】：2016-02-25 16:08:33
【问题描述】：

我使用 Enquire.js 和 Vue.js 来查询浏览器的大小并相应地更新两个数据属性。所以，如果我这样做：

ready: function() {
    // Listen for changes in the browser's size
    window.addEventListener("resize",
    enquire.register("screen and (max-width:400px)", {
        match: function() {
            this.displayIsLarge = false;
            this.displayIsSmall = true;
            console.log("the screen is now small");
        },
        unmatch: function() {
            this.displayIsLarge = true;
            this.displayIsSmall = false;
            console.log("the screen is now large");
        }
    })
    );
}

它将在控制台中输出正确的消息 (jsfiddle here)，但不会更改 displayIsLarge 和 displayIsSmall 的值。我在这里错过了什么？

【问题讨论】：

标签： javascript vue.js enquire.js

【解决方案1】：

问题在于this 的范围。完整的工作代码是：

ready: function() {
    var self = this;
    // Listen for changes in the browser's size
    window.addEventListener("resize",
    enquire.register("screen and (max-width:400px)", {
        match: function() {
            self.displayIsSmall = true;
            self.displayIsLarge = false;
            console.log("the screen is now small");
        },
        unmatch: function() {
            self.displayIsLarge = true;
            self.displayIsSmall = false;
            console.log("the screen is now large");
        }
    })
    );
}

Jsfiddle here

【讨论】：