vue-ico | Dead easy , Google Material Icons for Vue | Icon library

I have a BaseMenuItem component that has normal button elements as well as special news elements. I have added a ticker effect to the news type els and want to stop the ticker on that element when it's clicked. Currently the click event stops the ticker effect on the whole group.

How can I target a single element from that group?

There are two methods, openNews one showing the specific news article that the element is linked to. And clearItemType that clears the itemType upon recieving the emitted event from the BaseMenuItem component.

I'm just not sure which element to target to change it's itemType. Does Vuejs have a way to make an unique data value for dynamically generated elements?

If you need anymore information please let me know!

Cheers!

BaseMenuItem

I have a MainMenuItem that has a bunch of static titles. There is one variable item that is for news and events and that has a horizontal ticker, scroll animation on it. This animation is happening inside of the MainMenuItem component, but the click event will be happening from the parent. The click event currently needs to stop the animation and change the font weight (can be seen in the readLink class).

Wth Vue I cannot mutate the prop type itself with something like @click="itemType = ''".

So how can I turn this ticker animation off on click?

Basically, all I would need to do is make the MainMenuItem's itemType = '' and make it the same as every other item. Do I need to make a data type? Or a click event that $emit's an event to the child/base component MainMenuItem?

If there is anymore code that is necessary please let me know!

Cheers!

MainMenuItem.vue (base component with the ticker animation )

I was following the Browser section of official documentation https://bootstrap-vue.org/docs, however the BootstrapVue components just didn't render as expected.

html file as follow:

I am working with BootstrapVue and am trying to dynamically create components after the site is rendered (I want to use asynchronous data for the generation process later) with Vue and add them to the DOM.

(I am simulating the asynchrony in the demo by creating the components with a 1 second delay after the page is loaded).

This is what happens: Vue is creating the components and then they should be mounted to the DOM. But sadly they don't show up. Instead this comment: is added to them DOM (at the correct position though) in place of the actual HTML code of the component.

This is the jsfiddle with example code that demonstrates the problem: https://jsfiddle.net/0stdxorj/1

Thank you for your help :).