Нужна помощь в передаче значений родительскому компоненту в VUE

Question

Мне нужна помощь с моим первым приложением, я новичок в VUE, поэтому я ожидаю, что многого я не знаю. Я начал этот проект с адаптации учебного пособия, которому я следовал в рамках курса, но, к сожалению, то, чего я пытаюсь достичь, не было подробно описано в курсе.

Я создал сокращенный контрольный пример, чтобы попытаться получить необходимую функциональность (ссылка ниже). https://codepen.io/christopherduffy/pen/bJWRJm

В этом случае я отображаю кнопки в цикле v-for для каждого объекта в массиве «quoteValues». Когда я нажимаю кнопку, значения объекта для этого индекса в массиве записываются на консоль.

Теоретически для добавления содержимого в DOM нажатая кнопка вызывает метод для выдачи значений, соответствующих индексу объектов в массиве quoteValues. Затем я использую цикл v-for для отображения всех кавычек в массиве «quotes», в который должны быть добавлены выбранные совпадающие значения. Это, по крайней мере, мое понимание.

У меня много проблем с тем, что метод «newQuote», который прикреплен к eventListener «quoteAdded», вызывается не так, как ожидалось. Быстрое примечание: перед созданием тестового примера каждый компонент был зарегистрирован в своем собственном файле component.vue, и метод сработал, но я не мог передать более одного значения.

Короче говоря, я пытаюсь добиться того, чтобы значения, соответствующие индексу нажатой кнопки, отображались в HTML-коде компонента «app-quote», как в примере ниже. У меня также было много трудностей, пытаясь разобраться со слотами и как добавить определенные значения в определенные слоты.

<div>
 <h3>added quote</h3>
 <p data-id="1">quote id: 1</p>
 <p>quote name: one</p>
</div>

В принципе, я был бы признателен, если бы кто-нибудь мог направить меня в том, что я делаю неправильно, или указать мне правильное направление (учитывая, что я новичок в VUE).

Answer 1

У вас возникла проблема с присвоением имени вашему событию.Посмотрите документы здесь, чтобы узнать, почему: https://vuejs.org/v2/guide/components-custom-events.html. В основном, когда вы запускаете fooGoo, вы не можете правильно прослушивать его через fooGoo.Или даже фу-гу!Я изменил вашу ручку здесь: https://codepen.io/cfjedimaster/pen/PgmxPp?editors=1111. Обратите внимание, как я просто упростил имена событий.

Из компонента:

this.$emit('quoteadded', this.quoteValues[index]);

И в разметке:

<app-new-quote v-on:quoteadded="newquote"></app-new-quote> 

Answer 2

Я только что написал ваш код и получил это сообщение

Event "quoteadded" is emitted in component <AppNewQuote> but the handler is registered 
for "quoteAdded". Note that HTML attributes are case-insensitive and you cannot use v- 
on to listen to camelCase events when using in-DOM templates. You should probably use 
"quote-added" instead of "quoteAdded".