v-forループでvueコンポーネントを使用する

Question

こんにちは私は、複数のvueコンポーネント（vue-popperjs - ツールチップ用）を生成するための助けが必要です。

コンポーネントはページに表示されますが、対話することはできません（ツールチップとツールヒントはデフォルトで表示されます）、コンソールにエラーがあります "vue.common.js？e881：560 [ Vueが]警告：取り付けられているフックでエラーが発生しました： （で見つかった）」

と

 
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 Vue$3.patch [as __patch__] (eval at (app.js:891), :5124:5) 
    at Vue$3.Vue._update (eval at (app.js:891), :2042:19) 
    at Vue$3.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) 

コード：

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

は、私は、レジスタポップでしたapp.jsごとに：

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

と同じコンポーネントが動作しますが、forループではありません。 助けてください、私は何をすべきか考えていません。

Answer 1

ここで問題は、段落要素（<p></p>）に埋め込まれているpopperのコンポーネントになっています。その要素から取り除くことで、この問題が解決されました。