How to correctly set properties for a vue.js component?

Question

Vue.js

Good afternoon. I have a component with a vector map, an array with coordinates comes from the admin panel

[
  {
    id: 1,
    lat: 55.75397469,
    lng: 37.62079239,
    map_x: "28.88888",
    map_y: "43.55670",
    name: "Москва",
    status: "active"
  },

  {
    id: 1,
    lat: 55.75397469,
    lng: 37.62079239,
    map_x: "28.88888",
    map_y: "43.55670",
    name: "Москва",
    status: "active"
  }
]

This is how I create points:

<map-point v-for="point in points" :key="point"></map-point>

This is what the component looks like:

<template>

    <div
            class="point"
            :style="{
                left: map_x + '%',
                top: map_y + '%'
            }"
    >
        <slot></slot>
    </div>

</template>

<script src="./mapPoint.js"></script>
<style src="./mapPoint.scss" lang="scss" scoped></style>

But I just can't figure out how to correctly set all the properties of the component.
Help me to understand. From the docks, I have not yet figured out how to do it right

Answer 1

You can simply pass the whole object with a dot:
You can also like this:
Then in the component you can immediately write props in this form:props['map_x', 'map_y']