В рейтинге участвует:

групп:

каналов:

Виртуальный сервер на SSD - недорого!

Аренда выделенных и виртуальных серверов (VDS/VPS), хостинг, аренда IP-адресов, администрирование, круглосуточная поддержка

qwarta.ru подробнее

Резервное копирование с проверкой на вирусы!!!

Удобный сервис создания резервных копий на любой сервер сети интернет. Отслеживайте изменения, проверяйте на вирусы. Надежно защитите свой бизнес!

go.backupland.com

Выбираете сервер? Любая конфигурация на заказ!

Аренда физических серверов любых конфигураций под любые запросы - 1С бухгалтерия, игровые сервера, нагруженные проекты, интернет-магазины!

qwarta.ru подробнее

Size: a a a

Vue.js Russian Developers Community

8834 membersпожаловаться на группу
2021 January 18

E

Eugene in Vue.js Russian Developers Community
Алексей
Всем добрый вечер:)
Делаю SPA.
Подскажите, пожалуйста, как передать данные из App.vue (родитель) в Contact.vue (дочерний)?
Имеется массив, contactData - список контактов, при нажатии на контакт надо скрывать общий список и открывать данные контакта.
В этом новом окне можно редактировать данные контакта - на счет редактирования и записи идеи есть, но как изначально туда передать данные?
https://ru.vuejs.org/v2/guide/components-props.html
ru.vuejs.org
Входные параметры — Vue.js
Vue.js — Прогрессивный JavaScript-фреймворк
источник
15:57пожаловаться#1

А

Алексей in Vue.js Russian Developers Community
но у меня почему-то ругается - ошибку выдаёт на него. Пишет, что массив undefined
источник
15:57пожаловаться#2

VK

Vladislav Kharlanchu... in Vue.js Russian Developers Community
Какой массив?
источник
15:58пожаловаться#3

A

A A in Vue.js Russian Developers Community
Алексей
но у меня почему-то ругается - ошибку выдаёт на него. Пишет, что массив undefined
По коду же видно, что не передаете в пропсы
источник
15:58пожаловаться#4

А

Алексей in Vue.js Russian Developers Community
<template>
 <div class="wrapper">
   <div v-for="(contact, index) in contactData" @key="index" class="row">
       <div>
         {{ contact.name }}
       </div>
   </div>

   <div></div>
 </div>
</template>

<script>
export default {
 props:['contactData'],
 data() {
   return {

   };
 },
};
</script>

вот код для Contact.vue (template - заготовка только)
источник
16:00пожаловаться#5

А

Алексей in Vue.js Russian Developers Community
на странице в итоге пусто
источник
16:00пожаловаться#6

c

chaotik in Vue.js Russian Developers Community
ппрблема еще в том, что непонятно, данные какого контакта отображать
источник
16:00пожаловаться#7

А

Алексей in Vue.js Russian Developers Community
в app.vue метод есть для этого (в консоль выводит корректно)
openContact(index) {
     let contact = this.contactData[index];
   }
источник
16:01пожаловаться#8

c

chaotik in Vue.js Russian Developers Community
contact существует только внутри функции
источник
16:01пожаловаться#9

c

chaotik in Vue.js Russian Developers Community
тогда this.contact=...
источник
16:02пожаловаться#10

c

chaotik in Vue.js Russian Developers Community
и пропом передавать this.contact
источник
16:02пожаловаться#11

c

chaotik in Vue.js Russian Developers Community
либо передавать индекс и весь массив
источник
16:03пожаловаться#12

c

chaotik in Vue.js Russian Developers Community
или событию передавать аргументом контакт
источник
16:05пожаловаться#13

c

chaotik in Vue.js Russian Developers Community
show-contact которое
источник
16:06пожаловаться#14

А

Алексей in Vue.js Russian Developers Community
что-то я не так делаю видать, раз у меня ничего не отображает.
пытаюсь уже передавать this.contact, но ничего не рисует в итоге, кроме статики
источник
16:14пожаловаться#15

c

chaotik in Vue.js Russian Developers Community
попробуй обьект передать просто
источник
16:15пожаловаться#16

c

chaotik in Vue.js Russian Developers Community
где в компоненте вообще проп для контакта?
источник
16:16пожаловаться#17

А

Алексей in Vue.js Russian Developers Community
в app.vue передаю методом
openContact(index) {
     let contact = this.contactData[index];
     this.contact = contact;
}
в contact: {},
источник
16:19пожаловаться#18

А

Алексей in Vue.js Russian Developers Community
а этот this.contact уже в пропе в contact добавлен
источник
16:20пожаловаться#19

Д

Дима in Vue.js Russian Developers Community
Алексей
в app.vue передаю методом
openContact(index) {
     let contact = this.contactData[index];
     this.contact = contact;
}
в contact: {},
что за @key ? откуда Index ? где openContact ?)
источник
16:20пожаловаться#20