I searched this problem a lot with no direct answer found.
I have a computed property that depends also on the window height so I need it to be recomputed every time the window is resized. Tried using $forceUpdate()
but I think it doesn't work with components. Here is my component :
Vue.component('trades-component', {
mixins: [tradingMixin],
created: function() {
var that = this;
// recompute visible trades if window resized
$( window ).on( "resize", function() {
that.$forceUpdate();
});
$( window ).resize();
},
computed: {
visibleTradesCount: function() {
var colOffset = $(".left-col").offset();
var colHeight = $(".left-col").height();
var tableOffset = $(".left-col #trade-history table").offset();
var tableHeight = colHeight - (tableOffset.top - colOffset.top) - this.rowHeight;
return Math.floor(tableHeight / this.rowHeight)
}
}
})
I know possible workarounds but want to know if there is a way to force recomputing a particular property or all computed properties in components.
This isn't as clean as @BillCriswell's answer, but if your computed has other dependencies that trigger a refresh (e.g a data change), you may want to stick with a computed.
You can force a recalc on resize by using data properties for window width and height, and adding a reference to them in your computed property.
data: function () {
return {
windowWidth: 0,
windowHeight: 0
}
}
created: function() {
var that = this;
$( window ).on( "resize", function() {
that.windowWidth = window.innerWidth;
that.windowHeight = window.innerHeight;
});
$( window ).resize();
},
computed: {
visibleTradesCount: function() {
const x = this.windowWidth;
const y = this.windowHeight;
...
Note, you may need to $(window).off("resize"
in beforeDestroy()
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With