Framework7 + Vue [错误]：属性或方法未在实例上定义，但在渲染期间被引用

Question

我是Vue的新手，正在试用Android的Framework7和Vue。

卡在错误：

属性或方法“ bannerLinks”未在实例上定义，但在渲染期间被引用。 确保在data选项中声明反应性数据属性。

在发现

  <App> at C:\\AppDEV\\Mobile\\xyz\\src\\main.vue <Root> 

bannerLinks是在Main.js文件中的data属性下定义的（下面的代码）

 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>

我尝试搜索laravel论坛vue。 谷歌似乎显示出有关此错误的许多结果，但有建议对我没什么用。 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); } }