I am looking for help with my first app, I am new to VUE so I expect there is much I don’t know. I started this project by adapting a tutorial I was following as part of a course, unfortunately what I am trying to achieve was not detailed in the course.
I have created a reduced test case to try and get the essential functionality working (linked below). https://codepen.io/christopherduffy/pen/bJWRJm
In this case I am displaying buttons in a v-for loop for each object in the “quoteValues” array. When I click a button the object values for the object at that index in the array are logged to the console.
In theory to add the content to the DOM the clicked button calls a method to emit values which match the index of objects in the “quoteValues” array. Then I am using a v-for loop to display all quotes in the “quotes” array to which the selected matching values should have been added. That is my understanding at least.
What I am having a lot of trouble with is the fact that the method “newQuote” which is attached to the eventListener “quoteAdded” is not being called as expected. Quick note, before creating the test case I had each component registered in its own component.vue file and the method would fire but I could not emit more than one value.
In short the result I am trying to achieve is that the values matching the index of the clicked button are displayed in the HTML seen in the “app-quote” component, like in the example below. I have also had a lot of difficulty trying to get my head around slots and how to add specific values to specific slots.
<div>
<h3>added quote</h3>
<p data-id="1">quote id: 1</p>
<p>quote name: one</p>
</div>
Basically I would appreciate if anyone could guide me as to what I’m doing wrong or point me in the right direction (keeping in mind I’m new to VUE).
You are running into an issue with your event naming. See the docs here for why: https://v2.vuejs.org/v2/guide/components-custom-events.html. Basically when you emit fooGoo, you can't properly listen for it via fooGoo. Or foo-goo even. I modified your pen here: https://codepen.io/cfjedimaster/pen/PgmxPp?editors=1111. Note how I just simplified the event names.
From the component:
this.$emit('quoteadded', this.quoteValues[index]);
And in the markup:
<app-new-quote v-on:quoteadded="newquote"></app-new-quote>