[Vuejs]-Problems with make responsive map areas in vue 3

by

0👍

✅

I would recalculate the coords one resize event of the image and pass it into components using template; first create array with coords sorted on keys 0 to the 9

const coords = [
  [222, 95, 260, 44]
  ...
]

<area v-for="(coords, index) in recalculatedCords" @click="press(index)" alt="`key${index}`" :coords="coords.join(',')" shape="rect">

Better yet, save percent values in the arrays (calculate percents in respect to the original image size). Then just iterate over coords array each time the image resizes, multiplying each coordinate with a new image with/height.

Leave a comment