When utilizing a duplicated VueJS component on a single page, it fails to correctly reference its own instance

Question

When utilizing a duplicated VueJS component on a single page, it fails to correctly reference its own instance

I've created a VueJS component and have it displayed multiple times on the same page. Each component functions independently, but there's an issue with a method that calculates its width offset and applies it as a class (such as width-800).

Everything works fine when there is only one instance of the component on a page.

However, when there are multiple instances, only the last one receives the class. The correct class is calculated for all instances based on their width, but only the final one actually gets the class applied.

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

The value this.breakpoint holds the class name as a data property.

mounted: function(){
  var self = this;

  this.calculateBreakpoint();

  window.onresize = function(event) {
      self.calculateBreakpoint();
  };
}

Here's the method for calculating the breakpoint:

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);
},

Any assistance would be greatly appreciated in solving this issue. I've been trying to figure it out for some time now.

Thank you.

javascript vue.js

Answer 1

Answer №1

When you attach a function to window.onresize, it will override any previous bindings. This can cause issues when you have multiple components in your application, as each mounted function will override the window.onresize event handler. That's why only the class of the last component is being changed.

To see this in action, try running the following code in your console:

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

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

After resizing, only 'b' will be logged.

For a better way to handle this issue, consider using jQuery to bind functions to the window.onresize event:

$(window).resize(function() {
 console.log('a')
})

$(window).resize(function() {
 console.log('b')
})

With this approach, both 'a' and 'b' will be logged when you resize the window.

To implement this with your specific case, change your window.onresize calls to:

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

Alternatively, you can follow Daniel Beck's suggestion and use pure JavaScript without jQuery:

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

Answer 2

When you attach a function to window.onresize, it will override any previous bindings. This can cause issues when you have multiple components in your application, as each mounted function will override the window.onresize event handler. That's why only the class of the last component is being changed.

To see this in action, try running the following code in your console:

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

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

After resizing, only 'b' will be logged.

For a better way to handle this issue, consider using jQuery to bind functions to the window.onresize event:

$(window).resize(function() {
 console.log('a')
})

$(window).resize(function() {
 console.log('b')
})

With this approach, both 'a' and 'b' will be logged when you resize the window.

To implement this with your specific case, change your window.onresize calls to:

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

Alternatively, you can follow Daniel Beck's suggestion and use pure JavaScript without jQuery:

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

Answer 3

Answer №2

Implement the v-bind:class feature outside of the template as shown below:

Vue.component("foo", {
  template: "<div>{{item}}</div>",
  props: ["item"]
});

var app = new Vue({
  el: "#app",
  data: {
    background: "blue",
    items: ["a", "b", "c", "d"]
  },
  mounted: function() {
    var self = this;
    this.calculateBreakpoint();
    window.onresize = function(event) {
      self.calculateBreakpoint();
    };
  },
  methods: {
    calculateBreakpoint: function() {
      var mediaLibraryWidth = null;
      var elems = document.getElementsByClassName("app");
      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.background = "red";
      } else if (mediaLibraryWidth < 957 && mediaLibraryWidth > 700) {
        this.background = "blue";
      } else {
        this.background = "green";
      }

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

.red {
  background: red;

}

.blue {
  background: blue;

}

.green {
  background: green;

}

.widget {
  margin: 10px;
  padding: 20px;
  width: 200px;
  font-weight: bold;
  font-size: 16px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app" class="app"> 
  <foo v-for="item in items" :class="[background]" class="widget" :item="item"> 
</div>

https://codepen.io/anon/pen/RVLrmG

Answer 4

Implement the v-bind:class feature outside of the template as shown below:

Vue.component("foo", {
  template: "<div>{{item}}</div>",
  props: ["item"]
});

var app = new Vue({
  el: "#app",
  data: {
    background: "blue",
    items: ["a", "b", "c", "d"]
  },
  mounted: function() {
    var self = this;
    this.calculateBreakpoint();
    window.onresize = function(event) {
      self.calculateBreakpoint();
    };
  },
  methods: {
    calculateBreakpoint: function() {
      var mediaLibraryWidth = null;
      var elems = document.getElementsByClassName("app");
      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.background = "red";
      } else if (mediaLibraryWidth < 957 && mediaLibraryWidth > 700) {
        this.background = "blue";
      } else {
        this.background = "green";
      }

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

.red {
  background: red;

}

.blue {
  background: blue;

}

.green {
  background: green;

}

.widget {
  margin: 10px;
  padding: 20px;
  width: 200px;
  font-weight: bold;
  font-size: 16px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app" class="app"> 
  <foo v-for="item in items" :class="[background]" class="widget" :item="item"> 
</div>

https://codepen.io/anon/pen/RVLrmG

When utilizing a duplicated VueJS component on a single page, it fails to correctly reference its own instance

Answer №1

Answer №2

Similar questions

What is the best way to activate a click event in Vue.js?

Having trouble interpreting json with angularjs

Exploring the Power of Asynchronous Operations with Await and Async in

When utilizing a Slick carousel with three slides and setting autoPlay to true, the slider-nav behaves as if there are five slides

Mesh object circling in the opposite direction of the displayed image

What is the best way to display the contents of a javascript file on the screen by using its URL?

Please be advised that the message is currently in the process of being typed

Leveraging periods within a MySQL database: Node.js for seamless updates

ParsleyJS always seems to miss the mark when it comes to

Confirm the 'background-image' CSS URL with Cypress

Invoking a class method in Javascriptcore on iOS

Tips for highlighting a button within a details list using React and Office Fabric

Having trouble with your Angular routes tutorial?

"From time to time, reimport React when saving to ensure all necessary imports are

Vue.js Error: Attempting to access property 'product' on an undefined variable

Receiving an unexpected error message related to Vuex in the watcher function, even though I am not utilizing Vuex in my N

Uploading CSV file in Angular to populate the scope rather than sending it to the server

Tips for verifying the functionality of your AngularJS controller and troubleshooting any potential issues

Leveraging Shared Workers within a React application

Using document.getElementById will only target a single item