Vue.js-组件和元素.io-错误

我使用Element.io中的此组件：

在我的模板中：

<div id="app">
    <el-tabs>
        <el-tab-pane v-for="(shop, index) in shops" v-bind:label="shop.shopName">
             <jett-settings :shop="shop" inline-template>
                <div>
                    <el-popover
                            ref="popover1"
                            placement="top-start"
                            title="Title"
                            width="200"
                            trigger="click"
                            content="this is content, this is content, this is content">
                    </el-popover>

                    <el-button v-popover:popover1>Hover to activate</el-button>

                </div>
            </jett-settings>
        </el-tab-pane>
    </el-tabs>
</div>

和组件：

Vue.component('jettSettings', {
    props: ['shop'],
    ....

我得到了这个错误：

[Vue warn]: Error in directive popover bind hook: "TypeError: Cannot set property 'reference' of undefined"

有人知道为什么会发生这个错误，我如何解决它吗

---

谢谢

问题在于vue不支持将ref绑定到变量。绕过它的方法是将功能包装为一个单独的组件

//寄存器
Vue.component（'my-popover'{
模板：`
这是内容，这是{{shop}的内容，这是内容
悬停以激活
`,
道具：[“商店”]
})
var Main={
数据（）{
返回{
商店：['abc'，'def']
}
}
}
变量向量=Vue.extend（主）
新Ctor（）.$mount（'#app'）

@import-url（“//unpkg.com/element-ui/lib/theme-chalk/index.css”）；

与live demo共享所有代码，您的应用程序中没有

参考

code@user2486-在我的整个模板中没有“参考”。我唯一的参考是ref=“popover1”在尝试将

el popover

放入

jett settings

组件不在标记内，如示例中所示，您的意思是在上面？它不起作用，然后我得到：“内联模板组件必须正好有一个子元素。”.在我的例子中，我忘记了一些重要的东西，v-for。我编辑了它。这可能是原因吗？@Toben:你把标签放在标签内，想象一下，外部标签被模板替换，那么内部标签就不起作用了。谢谢！现在可以了。我还有一个问题：为什么商店打印在这里？：shop=“shop”似乎会导致回显shop-但为什么？shop是数组中绑定到组件中shop道具的字符串。您可以将其重命名为title，就像我在这里做的一样，

：

是

v-bind:

的缩写，例如：

和

是相同的

[Vue warn]: Error in directive popover bind hook: "TypeError: Cannot set property 'reference' of undefined"