Как динамически изменять размеры блока?

Question

[Евгений]

Я пытаюсь реализовать изменение размеров блока при прокрутке колёсика мыши. При инспектировании элемента, я вижу, что свойство transform изменяется, но визуально блок не меняется.

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

Answer 1

[0xD34F]

Нет такого атрибута - transform. Это должно быть свойство style:

:style="{ transform: computedMatrix }"

Answer 2

[Alex]

Попробуйте пробрасывать стиль через кастомные свойства. Примерно так

<div 
                style="width: 100px; height: 100px; background: red;" 
                : style=" '--matrix: ' + computedMatrix"
            ></div>

.workspase {
        width: 800px;
        height: 500px;
        border: 2px solid black;
transform: var(--matrix);
    }

Comments

[0xD34F]

Пара косяков, надо поправить:

1. лишний пробел между двоеточием и style
2. transform должен применяться не к самому .workspase, а к вложенному элементу