在 v-for 循环中使用 vue 组件

Posted 2023-02-23

【中文标题】在 v-for 循环中使用 vue 组件

【英文标题】：use vue component in v-for loop

【发布时间】：2017-12-01 23:40:01

【问题描述】：

您好，我需要帮助生成多个 vue 组件（vue-popperjs - 用于工具提示）。

在下面的代码中，组件出现在页面上，但我无法与它们交互（按钮不会切换工具提示，默认情况下会显示工具提示）并且我在控制台中有错误 “vue.common.js?e881:560 [Vue 警告]：挂载钩子错误： （见于）”

和

TypeError：无法读取未定义的属性“0” 在 VueComponent.mounted (eval at (app.js:909), :117:64) 在 callHook 处（在 (app.js:891) 处评估，:2275:21） 在 Object.insert （评估在（app.js:891），：2954:7） 在invokeInsertHook（评估在（app.js:891），：4960:28） at Vue$3.patch [as __patch__] (eval at (app.js:891), :5124:5) 在 Vue$3.Vue._update（评估在 (app.js:891), :2042:19） 在 Vue$3.updateComponent (eval at (app.js:891), :2158:10) 在 Watcher.get（评估在 (app.js:891), :2469:25） 在 Watcher.run（评估在 (app.js:891), :2539:22） 在flushSchedulerQueue（评估在（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 中注册了 popper：

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

并且作为相同的组件工作但不在 for 循环中。 请帮帮我，我不知道该怎么办。

【问题讨论】：

你的组件的javascript代码是什么？

那是插件npmjs.com/package/vue-popperjs

我明白了。我的意思是你的代码。不是模板。

我不明白你什么代码？你的意思是在附加类别？我只是实现了那个插件并使用了他，我没有我的 js 代码。

是的，additionalCategories 是在哪里定义的？ new Vue(...)等在哪里

【参考方案1】：

这里的问题归结为 popper 组件被嵌入到段落元素 (<p></p>) 中。把它从那个元素中去掉就解决了这个问题。