Vue: как общаться с конкретным дочерним компонентом от родителя - PullRequest
Новая
       18

Vue: как общаться с конкретным дочерним компонентом от родителя

1 голос
/ 24 июня 2019

Я хочу передать данные, отправленные сервером, на указанный дочерний компонент. Вот как я добавил компоненты в родительский компонент: 

<my-order v-for="order in orders" :key="order.id" :generalData="order"></my-order>

Хотя компонент может быть идентифицирован с помощью key, я не понимаю, как я могу достичь определенного элемента (скажем, я хочу изменить содержимое в <span> определенного my-order, обозначенного key) и измените его содержание. 

Orders
    Order [key=1]
    Order [key=2]
    Order [key=3]

Допустим, Order [key=2] был обновлен в бэкэнде, и я хочу отразить это изменение в клиенте. Поэтому я хочу обновить этот конкретный Order [key=2] в клиенте.

1 Ответ

0 голосов
/ 24 июня 2019

Вам просто нужно поместить динамические данные внутрь orders.

Ex:

Server API возвращает это orders json: 

[
  {
    "id": 1,
    "value": 100,
    "some_data": null
  },
  {
    "id": 2,
    "value": 50,
    "some_data": "Anything you can think"
  },
  {
    "id": 3,
    "value": 75,
    "some_data": null
  }
]

в вашем компоненте вы просто используете данные: 

<my-order v-for="order in orders" :key="order.id" :generalData="order">
    //Inside the component

    <span v-if="generalData.some_data !== null">{{generalData.some_data}}</span>

    //End Inside Component
</my-order>

таким образом, каждый order получит ваши уникальные данные, или span не будет отображаться, если some_data равен null

...