A guide to quickly obtaining the width and height of an element as it resizes in Vue.js

Question

A guide to quickly obtaining the width and height of an element as it resizes in Vue.js

Is there a way to immediately get the width and height of an element when it is resizing in Vue.js? I have created a Codepen illustration and would appreciate any help in making it function correctly, thank you!

Codepen

let app = new Vue({
  el: '#app',
  data: {
    boxs: [{
        width: 100,
        height: 100
      },
      {
        width: 100,
        height: 100
      }
    ]
  }

});

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.resize {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  background-color: #C3E2CE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <div v-for="box,key in boxs" class="resize">
    {{ box.width }} x {{ box.height }}
  </div>
</div>

javascript events vue.js resize

Answer 1

Answer №1

If you're looking for instant feedback that reacts to resizing actions in real time, you could consider utilizing a MutationObserver. This allows you to connect it to a specific reference point within your component and monitor any mutations that occur.

The MutationObserver can be attached within the mounted function of your code. Additionally, remember to handle any necessary clean-up operations in the destroyed function.

const Resizable = {
  template: "<div ref='main' @resize='onResize' class='resize'>{{dims.width}} | {{dims.height}}</div>",
  data() {
    return {
      dims: {
        width: null,
        height: null
      }
    };
  },
  mounted() {
    const {
      width,
      height
    } = this.$refs.main.getBoundingClientRect();

    this.dims.width = width;
    this.dims.height = height;

    const mutationHandler = mutationList => {
      for (let mutation of mutationList) {
        if (mutation.type === "attributes") {
          const {
            width,
            height
          } = mutation.target.getBoundingClientRect();

          this.dims.width = width;
          this.dims.height = height;
        }
      }
    };
    const mo = new MutationObserver(mutationHandler);

    mo.observe(this.$refs.main, {
      attributes: true,
      childList: true,
      subtree: true
    });

  },
  methods: {
    onResize() {
      console.log("Resized");
    }
  }
};

const app = new Vue({
  el: "#app",
  components: {
    "resizable": Resizable
  },
  data() {
    return {
      items: [
        "foo",
        "bar",
        "fizz"
      ]
    }
  }
});

body {
  background-color: #414141;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.resize {
  resize: both;
  margin: 5px;
  width: 100px;
  height: 100px;
  color: black;
  overflow: scroll;
  background-color: white;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

<div id="app">
  <div class="container">
    <resizable v-for="item in items" :key="item" class="resize"></resizable>
  </div>
</div>

Answer 2

If you're looking for instant feedback that reacts to resizing actions in real time, you could consider utilizing a MutationObserver. This allows you to connect it to a specific reference point within your component and monitor any mutations that occur.

The MutationObserver can be attached within the mounted function of your code. Additionally, remember to handle any necessary clean-up operations in the destroyed function.

const Resizable = {
  template: "<div ref='main' @resize='onResize' class='resize'>{{dims.width}} | {{dims.height}}</div>",
  data() {
    return {
      dims: {
        width: null,
        height: null
      }
    };
  },
  mounted() {
    const {
      width,
      height
    } = this.$refs.main.getBoundingClientRect();

    this.dims.width = width;
    this.dims.height = height;

    const mutationHandler = mutationList => {
      for (let mutation of mutationList) {
        if (mutation.type === "attributes") {
          const {
            width,
            height
          } = mutation.target.getBoundingClientRect();

          this.dims.width = width;
          this.dims.height = height;
        }
      }
    };
    const mo = new MutationObserver(mutationHandler);

    mo.observe(this.$refs.main, {
      attributes: true,
      childList: true,
      subtree: true
    });

  },
  methods: {
    onResize() {
      console.log("Resized");
    }
  }
};

const app = new Vue({
  el: "#app",
  components: {
    "resizable": Resizable
  },
  data() {
    return {
      items: [
        "foo",
        "bar",
        "fizz"
      ]
    }
  }
});

body {
  background-color: #414141;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.resize {
  resize: both;
  margin: 5px;
  width: 100px;
  height: 100px;
  color: black;
  overflow: scroll;
  background-color: white;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

<div id="app">
  <div class="container">
    <resizable v-for="item in items" :key="item" class="resize"></resizable>
  </div>
</div>

Answer 3

Answer №2

One simple approach involves using vanilla JavaScript's eventListener to update a local variable

window.addEventListener('resize', this.getWindowWidth);

data() {
  return {
    windowWidth:0
  }
},
mounted () {
  this.$nextTick(function() {
    window.addEventListener('resize', this.getWindowWidth);
    this.getWindowWidth()
  })
},
methods: {
getWindowWidth() {
  this.windowWidth = document.documentElement.clientWidth
}
}

Remember to remove the eventListener when the component is destroyed

beforeDestroy() {
  window.removeEventListener('resize', this.getWindowWidth);
}

Answer 4

One simple approach involves using vanilla JavaScript's eventListener to update a local variable

window.addEventListener('resize', this.getWindowWidth);

data() {
  return {
    windowWidth:0
  }
},
mounted () {
  this.$nextTick(function() {
    window.addEventListener('resize', this.getWindowWidth);
    this.getWindowWidth()
  })
},
methods: {
getWindowWidth() {
  this.windowWidth = document.documentElement.clientWidth
}
}

Remember to remove the eventListener when the component is destroyed

beforeDestroy() {
  window.removeEventListener('resize', this.getWindowWidth);
}

Answer 5

Answer №3

Excuse my lack of Vue expertise, I am still in the learning process myself. My recommendation would be to take a more modular approach by extracting the boxes and then looping through as many as needed. It is important to note that this method may not be considered best practice, as ideally, the box width and height should come from props and data loaded from the root element.

const box = Vue.component("box", {
  template: '<div class="resize">{{ boxWidth }} x {{ boxHeight}}</div>',
  data() {
    return {
      boxWidth: 100,
      boxHeight: 100,
    };
  },
  mounted: function() { 
    this.$el.addEventListener("mouseup", this.move);
  },
  methods: {
    move(e) {
      if (e.target == this.$el) {
        this.boxWidth = parseInt(this.$el.style.width);
        this.boxHeight = parseInt(this.$el.style.height);
      }
    }
  }
});

let app = new Vue({
  el: "#app",
  components: { box: box },
});

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.resize {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  background-color: #C3E2CE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="app">
    <div v-for="b in [0,1]">
      <box></box>
    </div>
</div>

Answer 6

Excuse my lack of Vue expertise, I am still in the learning process myself. My recommendation would be to take a more modular approach by extracting the boxes and then looping through as many as needed. It is important to note that this method may not be considered best practice, as ideally, the box width and height should come from props and data loaded from the root element.

const box = Vue.component("box", {
  template: '<div class="resize">{{ boxWidth }} x {{ boxHeight}}</div>',
  data() {
    return {
      boxWidth: 100,
      boxHeight: 100,
    };
  },
  mounted: function() { 
    this.$el.addEventListener("mouseup", this.move);
  },
  methods: {
    move(e) {
      if (e.target == this.$el) {
        this.boxWidth = parseInt(this.$el.style.width);
        this.boxHeight = parseInt(this.$el.style.height);
      }
    }
  }
});

let app = new Vue({
  el: "#app",
  components: { box: box },
});

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.resize {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  background-color: #C3E2CE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="app">
    <div v-for="b in [0,1]">
      <box></box>
    </div>
</div>

A guide to quickly obtaining the width and height of an element as it resizes in Vue.js

Answer №1

Answer №2

Answer №3

Similar questions

Trigger a jQuery event when a particular element has finished loading

Rows in a table will not decrease when added anew

Arrange pictures into an array and showcase them

Whenever I attempt to implement NavigationContainer in react native, an error always pops up

What is the best way to access dropdown sub-menu options from a complex multi-level navigation bar

Update database upon drag-and-drop using jQuery

Using Node.js in conjunction with Nuxt.js: a beginner's guide

The JSON data parser does not support the use of single quotation marks

Toggling event triggers with the second invocation

What is the best way to handle errors in the front-end when receiving responses from expressjs?

Designing a personalized look for a property with Styled-System

Modify the text of a button in Angular to be underlined after it has

Transfer the value of a variable within the local scope to the dragstart event handler during the dynamic generation of an input element

Change not accepted

Tips for avoiding page reloading with the use of vue, vue recaptcha, and axios

Utilize the @blur event within flatpickr to trigger actions when the output is empty

The update of data has encountered a hurdle with Mongoose

Utilizing vuex methods within a promise

Avoiding metacharacters and utilizing them as a string variable for selection

Managing the ajax response to showcase a button within datatables