Using Vue and facing an issue with a div setup that I have:
<div :style="'width:' + imageSize.width + 'px; height:' + imageSize.height + 'px'" id="image-container"></div>
The dimensions are stored in the data like this:
data() {
return {
...
imageSize: {
width: 500,
height: 500
}
...
}
In addition, there are two buttons to zoom in and out the div:
<v-btn rounded color="white" class="ma-2" @click="zoom('+')">
<v-icon>mdi-magnify-plus-outline</v-icon>
</v-btn>
<v-btn rounded color="white" class="ma-2" @click="zoom('-')">
<v-icon>mdi-magnify-minus-outline</v-icon>
</v-btn>
The zoom function is as follows:
zoom(type) {
if(type == '+') {
this.imageSize.height += 100;
this.imageSize.width += 100;
console.log('Zoom in clicked!')
} else {
this.imageSize.height -= 100;
this.imageSize.width -= 100;
console.log('Zoom out clicked!')
}
const { offsetWidth, offsetHeight } = document.getElementById("image-container");
console.log(offsetWidth);
console.log(offsetHeight);
},
Clicking the button to zoom in increases the size of the div by 100px per side. However, when trying to retrieve the size of the div to save in the data, the size remains unchanged. It also seems to revert back to the previous zoom size upon clicking again. Refer to the console screenshot below: Screenshot of the console
Expectation is to get 600 instead of 500 after zooming in by 100px. Appreciate any help on this matter!