Как правильно прописать свойства у компонента vue.js?

Question

[Дима Паутов]

Добрый день. У меня есть компонент с векторной картой, из админки приходит массив с координатами

[
  {
    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"
  }
]

Так я создаю точки:

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

Так выглядит сам компонент:

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

Но никак не могу понять, как правильно прописать все свойства у компонента.
Помогите разобраться. Из доки пока не понял как это правильно делать

Answer 1

[Evgeny Kulakov]

Можете просто объект с точкой целиком передать:

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

Можно вот так еще:

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

Тогда в компоненте сразу можно пропсы в таком виде писать: props['map_x', 'map_y']

Comments

[Дима Паутов]

Написал во так:

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

Задал свойство так:

props: {
  point: {
    type: Object,
    required: true
  }
}

Получил такие ошибки:

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

[Evgeny Kulakov]

Ну это не ошибка, а предупреждение. Просто вью предупреждает, что вы передаете объект, он предается по ссылке, поэтому все изменения объекта в дочернем компоненте отразятся на родительском.

[Дима Паутов]

Evgeny Kulakov: а как-то избежать этого можно? Просто напрягает это красное предупреждение в консоли

[Evgeny Kulakov]

Дима Турков: Второй вариант в ответе?

[JSmitty]

эмм, у вас ошибка в ключе в v-for, вы и Евгений некорректно присваиваете объект в качестве ключа. Надо так:

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

[Evgeny Kulakov]

JSmitty: Блин, точно, криво прочитал) Еще подумал , что я не встречал такого предупреждения при передаче объектов, подумал, что может добавили.

[Дима Паутов]

JSmitty: я вот так и сделал и всё стало ок))

[Дима Паутов]

Evgeny Kulakov: спс за помощь!