获取错误标题中的错误,我是 vue.js 的新手,我无法弄清楚
我一辈子都无法调试这个,有人可以帮忙吗?
const app = new Vue({
el: '#location-box',
data: {
locations: [
{
name: "Europe",
desc: "Loren ipsum"
},
{
name: "America",
desc: "Loren ipsum"
}
],
},
})
我的 HTML:
<div id="location-section">
<div class="main-container">
<div class="location-grid-container">
<div id="info-box" class="outline">
</div>
<div>
<div id="location-box" v-for="location in locations" class="outline">
<h1>{{location.name}}</h1>
</div>
</div>
</div>
</div>
最佳答案
传递给 new Vue
应用程序的 el
选项的根元素必须是唯一的,并且仅用作占位符。
然后您可以在其子项上使用 Vue 指令。
所以在你的情况下你可以这样做:
<div id="location-section">
<div class="main-container">
<div class="location-grid-container">
<div id="info-box" class="outline">
</div>
<div id="location-box"><!-- Root element for your Vue app -->
<div v-for="location in locations" class="outline">
<h1>{{location.name}}</h1>
</div>
</div>
</div>
</div>
new Vue({
el: '#location-box',
// etc.
});
关于javascript - - 不能在有状态组件根元素上使用 v-for,因为它呈现多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50637898/