I am new to Vue and trying out Framework7 and Vue for Android.
Got stuck at the error:
Property or method "bannerLinks" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
found in
<App> at C:\AppDEV\Mobile\xyz\src\main.vue <Root>
bannerLinks is been defined in Main.js file under data attribute (code below)
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
}
});I am getting links of images from api and want to dynamically loop through them in my main.vue template file on this link of code:
<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>
I tried searching vue, laravel forum. google seems to show many result regarding this error but there suggestion where not that useful to me. even many queries are there on Stack Overflow itself but none of them are solution to my query.
It may be the lack of my understanding of Vue.
Adding Main.vue Code for reference :
<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>Edit / Update : Solved the error after help here. Just added the below code to main.vue export default function.
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);
}
}
