Почему при добавление переменно в style, она перестаёт обновляться?

Question

[topi768]

при одном нажатии все работает и переменная zoom приравнивается к 2, но следующие попытки уменьшить/увеличить счетчик результата не дают. Причем, если убрать :style="{ transform: `scale(${zoom})` }", то все работает и zoom меняется как должен

<template>
  <button class="zoom-btn" @click="increment">+</button>
  {{ zoom }}
  <button class="zoom-btn" @click="decrement">-</button>
  <div class="map" :style="{ transform: `scale(${zoom})` }">
</div>
</template>
<script setup>

import { ref, onMounted } from "vue";
const zoom = ref(1);

function increment() {
  zoom.value++;
}

function decrement() {
  zoom.value--;
}
</script>

Answer 1

[drawnofmymind]

Когда scale становится 2 он перекрывает твои кнопки.
Добавь для примера margin-top: 30px; для div

Comments

[topi768]

я догадывался, что ошибка глупая кроется, но чтобы настолько.. Спасибо большое!