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.

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

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://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> 
  • Thank you very much Raymond. I have a lot to learn about vue syntax and this is helping me get the app to where I need it to be. Would you have any insight on how to control the values in specific slots once they have been emitted? I see in this instance the entire object looks to be parsed as a string, partially because I'm only using a single slot I imagine. – Christopher Duffy Apr 11 at 15:11
  • To be honest I'm not quite sure what you are asking. Are you saying you want to emit one value, not an object? – Raymond Camden Apr 11 at 15:19
  • Thanks for your help Raymond, I was pointed in the right direction and now have the app doing what I want. – Christopher Duffy Apr 12 at 15:52

I just wrote your code and I have got this message

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.