我是Vue的新手，并尝试使用Framework7和Vue for Android。
遇到错误：
属性或方法“bannerLinks”未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。
在
中找到<App> at C:\AppDEV\Mobile\xyz\src\main.vue <Root>
bannerLinks已在Main.js文件中的数据属性（下面的代码）
下定义
new Vue({
el: '#app',
data: {
bannerLinks: []
},
mounted() {
axios.get('/skills').then(Response => this.bannerLinks = Response.data);
},
template: '<app/>',
framework7: {
root: '#app',
material: true,
routes: Routes
},
// Register App Component
components: {
app: App
}
});
我从api获取图像链接，并希望在我的main.vue模板文件中动态循环遍历此代码链接：
<f7-swiper-slide v-model="bannerLinks" v-for="item in bannerLinks" :key="item.id"><img :src="item" width="100%" height="200px" class="lazy" ></f7-swiper-slide>
我试着搜索vue，laravel论坛。谷歌似乎显示有关此错误的许多结果，但有建议哪里对我没用。 Stack Overflow本身甚至有很多查询，但它们都不是我查询的解决方案。
可能是我对Vue缺乏了解。
添加Main.vue代码以供参考：
<template>
<!-- App -->
<div id="app">
<!-- Statusbar -->
<f7-statusbar></f7-statusbar>
<!-- Left Panel -->
<f7-panel left reveal layout="dark">
<f7-view id="left-panel-view" navbar-through :dynamic-navbar="true">
<f7-navbar title="Left Panel"></f7-navbar>
<f7-pages>
<f7-page>
<f7-block inner>
<p>Left panel content goes here</p>
</f7-block>
<f7-block-title>Load page in panel</f7-block-title>
<f7-list>
<f7-list-item link="/about/" title="About"></f7-list-item>
<f7-list-item link="/form/" title="Form"></f7-list-item>
</f7-list>
<f7-block-title>Load page in main view</f7-block-title>
<f7-list>
<f7-list-item link="/about/" title="About" link-view="#main-view" link-close-panel></f7-list-item>
<f7-list-item link="/form/" title="Form" link-view="#main-view" link-close-panel></f7-list-item>
</f7-list>
</f7-page>
</f7-pages>
</f7-view>
</f7-panel>
<!-- Right Panel -->
<f7-panel right cover layout="dark">
<f7-view id="right-panel-view" navbar-through :dynamic-navbar="true">
<f7-navbar title="Right Panel" sliding></f7-navbar>
<f7-pages>
<f7-page>
<f7-block>
<p>Right panel content goes here</p>
</f7-block>
<f7-block-title>Load page in panel</f7-block-title>
<f7-list>
<f7-list-item link="/about/" title="About"></f7-list-item>
<f7-list-item link="/form/" title="Form"></f7-list-item>
</f7-list>
<f7-block-title>Load page in main view</f7-block-title>
<f7-list>
<f7-list-item link="/about/" title="About" link-view="#main-view" link-close-panel></f7-list-item>
<f7-list-item link="/form/" title="Form" link-view="#main-view" link-close-panel></f7-list-item>
</f7-list>
</f7-page>
</f7-pages>
</f7-view>
</f7-panel>
<!-- Main Views -->
<f7-views>
<f7-view id="main-view" navbar-through :dynamic-navbar="true" main>
<!-- Pages -->
<f7-pages>
<f7-page>
<!-- Search Bar -->
<f7-searchbar cancel-link="Cancel" placeholder="Search" :clear-button="true"></f7-searchbar>
<f7-swiper pagination :params="{autoplay: 2000}">
<f7-swiper-slide v-model="bannerLinks" v-for="item in bannerLinks" :key="item.id"><img :src="item" width="100%" height="200px" class="lazy" ></f7-swiper-slide>
</f7-swiper>
<f7-block-title>Welcome to Sollywood App</f7-block-title>
<f7-block inner>
<ul>
<li v-for="bannerLink in bannerLinks" :key="bannerLink.id">{{ bannerLink }}</li>
</ul>
<p>What is Duis sed erat ac eros ultrices pharetra id ut tellus. Praesent rhoncus enim ornare ipsum aliquet ultricies. Pellentesque sodales erat quis elementum sagittis.</p>
</f7-block>
<f7-block-title>Navigation</f7-block-title>
<f7-list>
<f7-list-item link="/login/" title="Login"></f7-list-item>
<f7-list-item link="/about/" title="About"></f7-list-item>
<f7-list-item link="/form/" title="Form"></f7-list-item>
<f7-list-item link="/dynamic-route/blog/45/post/125/?foo=bar#about" title="Dynamic Route"></f7-list-item>
</f7-list>
<f7-block-title>Side Panels</f7-block-title>
<f7-block>
<f7-grid>
<f7-col width="50">
<f7-button open-panel="left">Left Panel</f7-button>
</f7-col>
<f7-col width="50">
<f7-button open-panel="right">Right Panel</f7-button>
</f7-col>
</f7-grid>
</f7-block>
<f7-block-title>Modals</f7-block-title>
<f7-block>
<f7-grid>
<f7-col width="50">
<f7-button open-popup="#popup">Popup</f7-button>
</f7-col>
<f7-col width="50">
<f7-button open-login-screen="#login-screen">Login Screen</f7-button>
</f7-col>
</f7-grid>
</f7-block>
</f7-page>
</f7-pages>
</f7-view>
</f7-views>
<!-- Popup -->
<f7-popup id="popup">
<f7-view navbar-fixed>
<f7-pages>
<f7-page>
<f7-navbar title="Popup">
<f7-nav-right>
<f7-link :close-popup="true">Close</f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, architecto. Cupiditate laudantium rem nesciunt numquam, ipsam. Voluptates omnis, a inventore atque ratione aliquam. Omnis iusto nemo quos ullam obcaecati, quod.</f7-block>
</f7-page>
</f7-pages>
</f7-view>
</f7-popup>
<!-- Login Screen -->
<f7-login-screen id="login-screen">
<f7-view>
<f7-pages>
<f7-page login-screen>
<f7-login-screen-title>Login</f7-login-screen-title>
<f7-list form>
<f7-list-item>
<f7-label>Username</f7-label>
<f7-input name="username" placeholder="Username" type="text"></f7-input>
</f7-list-item>
<f7-list-item>
<f7-label>Password</f7-label>
<f7-input name="password" type="password" placeholder="Password"></f7-input>
</f7-list-item>
</f7-list>
<f7-list>
<f7-list-button title="Sign In" close-login-screen></f7-list-button>
<f7-list-label>
<p>Click Sign In to close Login Screen</p>
</f7-list-label>
</f7-list>
</f7-page>
</f7-pages>
</f7-view>
</f7-login-screen>
</div>
</template>
<script>
export default {}
</script>
编辑/更新：在此处获得帮助后解决了错误。刚刚将以下代码添加到main.vue导出默认函数。
import axios from 'axios';
export default {
data: () => ({
bannerLinks: []
}),
// Fetches posts when the component is created.
created() {
axios.get('/skills').then(Response => this.bannerLinks = Response.data);
}
}