How to dynamically change the block size?

I'm trying to implement a resizing unit when scrolling the mouse wheel. When inspecting element, I see that the transform property is changed, but visually the block never changes.

https://jsfiddle.net/eo9L1452/

<div 
 class="workspase" 
 id="workspase" 
@mousewheel.passive="handleZoom($event)"
>
 <div 
 style="width: 100px; height: 100px; background: red;" 
:transform="computedMatrix"
></div>
</div>


export default {
 data () {
 return {
 matrix: { a: 1, b: 0, c: 0, d: 1, x: 0, y: 0 },
 zoom: 1,
}
},
 computed: {
 computedMatrix () {
 const { a, b, c, d, x, y } = this.matrix
 return `matrix(${this.zoom}, ${b} ${c}, ${this.zoom}, ${x}, ${y})`
},
},
 methods: {
 handleZoom ({ deltaY }) {
 this.zoom = deltaY < 0 ? (this.zoom * 10 + 1) / 10 : (this.zoom * 10 - 1) / 10
},

},
}


.workspase {
 width: 800px;
 height: 500px;
 border: 2px solid black;
 }
April 4th 20 at 13:25
2 answers
April 4th 20 at 13:27
Solution
There is no such attribute transform. This should be a style property:

:style="{ transform: computedMatrix }"
April 4th 20 at 13:29
Solution
Try to push the style through custom properties. Approximately
<div 
 style="width: 100px; height: 100px; background: red;" 
 : style=" '--matrix: '+ computedMatrix"
 ></div>


.workspase {
 width: 800px;
 height: 500px;
 border: 2px solid black;
transform: var(--matrix);
 }
A couple of stocks, should be correct:

1. extra space between the colon and style
2. transform should not be applied to .workspase, and to the nested element - Aleen_Heaney commented on April 4th 20 at 13:32

Find more questions by tags Vue.js