use vue component in v-for loop

Question

Hello I need a help with generating multiple vue component (vue-popperjs - for tooltip).

In code bellow, components appear on page but I cant to interact with them(button wont toggle tooltip and tooltip is show by default) and I have a error in console "vue.common.js?e881:560 [Vue warn]: Error in mounted hook: (found in )"

and

TypeError: Cannot read property '0' of undefined
 at VueComponent.mounted (eval at (app.js:909), :117:64)
 at callHook (eval at (app.js:891), :2275:21)
 at Object.insert (eval at (app.js:891), :2954:7)
 at invokeInsertHook (eval at (app.js:891), :4960:28)
 at Vue3ドル.patch [as __patch__] (eval at (app.js:891), :5124:5)
 at Vue3ドル.Vue._update (eval at (app.js:891), :2042:19)
 at Vue3ドル.updateComponent (eval at (app.js:891), :2158:10)
 at Watcher.get (eval at (app.js:891), :2469:25)
 at Watcher.run (eval at (app.js:891), :2539:22)
 at flushSchedulerQueue (eval at (app.js:891), :2331:13)

Code:

<span class="input" v-for="additionalCategory in additionalCategories">
 <p>@{{ additionalCategory.name }}
 <popper trigger="click" :options="{placement: 'right'}" :content="additionalCategory.tooltip_text">
 <div class="additionalCategory.tooltip_text">
 @{{ additionalCategory.tooltip_text }}
 </div>
 <button slot="reference">
 Reference Element
 </button>
 </popper>
 <span v-if="additionalCategory.tooltip_active" class="tooltip-div" @click="showTooltip(additionalCategory.tooltip_text, additionalCategory.id, $event)">
 <span class="tooltip_toggle" v-bind:class="additionalCategory.id"></span>
 </span>
 </p>
 <div class="input-action">
 <div class="counter">
 <input type="text" :value="additionalCategory.quantity" :id="additionalCategory.id">
 <div class="ico"><img :src="'/images/icons/'+additionalCategory.icon+'.png'"
 :id="additionalCategory.name"></div>
 <div class="plus-minus">
 <div class="minus" v-on:click="clickMinus($event, additionalCategory.id)"></div>
 <div class="plus" v-on:click="clickPlus($event, additionalCategory.id)"></div>
 </div>
 </div>
 </div>
</span>

I was register popper in app.js:

Vue.component('popper', require('vue-popperjs'));

and as same component work but not in for loop. Please help me, I don't have idea what to do.

• Bert: What is the javascript code for your component?
• Duka: That's plugin npmjs.com/package/vue-popperjs
• Bert: I understand. I mean your code. Not the template.
• Duka: I don't understand you what code? Do you mean on additionalCategorie? I was just implement that plugin and use him, I don't have my js code for that.
• Bert: Yes, where is additionalCategories defined? Where is new Vue(...), etc.

Answer 1

The issue here came down to the popper component being embedded in a paragraph element (<p></p>). Taking it out of that element solved the issue.