Javascript 在同一页面上使用重复的VueJS组件，不会'；t参考它'；正确处理自己的情况

我已经构建了一个VueJS组件，并且在同一页面上多次使用它。组件彼此独立地工作，但组件中有一个方法可以获取其偏移网络宽度，并将其（带有前缀）作为一个类（例如width-800）应用于组件

当一个页面上只有一个组件时，它可以正常工作

当存在多个时，只有最后一个事件应用于该类。它确实使用正确的宽度正确地计算了类，但没有将其应用于页面上的其他类

<template>
    <div id="app-medialib" v-bind:class="[this.breakpoint]">
        <p>{{ this.breakpoint }}</p>

和断点方法：

calculateBreakpoint: function(){
    var mediaLibraryWidth = null;

    var elems = document.getElementsByClassName('header medialib');
    for( var i=0; i<elems.length; i++ ){
        if( elems[i].offsetParent !== null ){
            console.log('elems[i]', elems[i]);
            mediaLibraryWidth = elems[i].offsetWidth;
            break;
        }
    }

    console.log('calculateBreakpoint', mediaLibraryWidth);

    if( mediaLibraryWidth > 956 ) {
        this.breakpoint = 'md';
    } else if( mediaLibraryWidth < 957 && mediaLibraryWidth > 700 ){
        this.breakpoint = 'sm';
    } else {
        this.breakpoint = 'xs';
    }

    console.log('calculateBreakpoint', this.breakpoint);
},

calculateBreakpoint:function（）{
var mediaLibraryWidth=null；
var elems=document.getElementsByClassName（'header medialib'）；
对于（变量i=0；i 956）{
this.breakpoint='md'；
}否则如果（mediaLibraryWidth<957&&mediaLibraryWidth>700）{
this.breakpoint='sm'；
}否则{
this.breakpoint='xs'；
}
log（'calculateBreakpoint'，this.breakpoint）；
},

非常感谢您在这方面的任何帮助。我挠头已经有一段时间了

---

谢谢。

当您执行window.onresize并将一个函数绑定到它时，以前的绑定将被覆盖，因此当您的应用程序中有多个组件时，将调用它们的挂载函数，该函数将覆盖window.onresize。这就是为什么只更改最后一个components类的原因

在控制台中尝试以下操作

window.onresize = function (e) {
  console.log('a')
}

window.onresize = function (e) {
  console.log('b')
}

调整大小时只记录“b”

结帐：

在您的情况下，使用jquery绑定window.onresize上的函数将是一种更好的方法

尝试：

调整大小时，它将同时记录“a”和“b”

因此，将window.onresize更改为：

$(window).resize(function() {
  self.calculateBreakpoint();
})

或者根据Daniel Beck的建议，如果要避免使用jquery，请使用：

 window.addEventListener('resize', self.calculateBreakpoint )

---

在模板外部应用

v-bind:class

，如下所示

Vue.component（“foo”{
模板：“{item}}”，
道具：[“物品”]
});
var app=新的Vue({
el:“应用程序”，
数据：{
背景：“蓝色”，
项目：[“a”、“b”、“c”、“d”]
},
挂载：函数（）{
var self=这个；
这个.calculateBreakpoint（）；
window.onresize=函数（事件）{
self.calculateBreakpoint（）；
};
},
方法：{
calculateBreakpoint:函数（）{
var mediaLibraryWidth=null；
var elems=document.getElementsByClassName（“app”）；
对于（变量i=0；i956）{
this.background=“red”；
}否则如果（mediaLibraryWidth<957&&mediaLibraryWidth>700）{
this.background=“蓝色”；
}否则{
this.background=“绿色”；
}
log（“calculateBreakpoint”，this.breakpoint）；
}
}
});
.red{
背景：红色；
}
蓝先生{
背景：蓝色；
}
格林先生{
背景：绿色；
}
.小部件{
利润率：10px；
填充：20px；
宽度：200px；
字体大小：粗体；
字体大小：16px；
颜色：白色；
}

我们需要调用组件的代码以及如何计算此.breakpoint以提供帮助：）编辑更多代码示例，请原谅混乱的计算，一旦正确应用了类，这将被重新处理：）为了避免覆盖事件绑定而抛出整个jQuery库是非常过分的<代码>窗口。addEventListener（“resize”，foo（））

也会这样做。@DanielBeck是的，我同意。更新我的答案，这样它也可以在不使用jquery的情况下解决问题。谢谢，干杯。我删除了我的答案，因为它实际上是你的答案的副本。

$(window).resize(function() {
  self.calculateBreakpoint();
})

 window.addEventListener('resize', self.calculateBreakpoint )