I’m very new to Framework7, and want to build a fairly simple mobile app – a list of places, detail pages of those places, and a map and about page. My current plan is to publish it via PhoneGap Build, since that seems like a fast and easy way to deploy.
I created my app using the phonegap-framework7-vue template. Perhaps overkill for such a simple app, but seems better than building it from scratch.
I want to load a list of places via AJAX (eventually via sqlite), and can’t figure out how/when to do this, and how to access the main app. My Murals.vue file has the template and the following script, but doesn’t load because app.request is undefined. I’ve tried framework7, Framework7, and moving it outside of the mounted() call, but feel like I’m just guessing. Any suggested? Thanks!
<script>
import F7List from "framework7-vue/src/components/list";
let dataURL = 'https://jsonplaceholder.typicode.com/posts'; // returns some json
export default {
name: 'Murals',
components: {F7List},
mounted() { // when the Vue app is booted up, this is run automatically.
app.request.get(dataURL, function (data) {
console.log(data);
});
},
data () {
return {
title: 'Murals'
};
}
};
</script>
Hi, you are in the right path.
i see you are using vue, so to access ‘APP’ you need to do it like this:
// this.$f7.request === app.request
this.$f7.request
after the request respones i would save the res in a data var, in that way you can render the response data in your vue template.
2 Likes
Thanks! I’m seeing the data now, but stuck on what is a newbie question. I’m seeing the data via console.log, and now I want to loop through the items and display a title in a list item. Using the
and - tags, it compiles but doesn’t display anything. Trying to use the f7 list component with a “for” tag for view doesn’t even compile, so I’m missing something important on how these things work together. Should I be creating a template element?
Happy to follow any tutorials to understand this better. Thanks again.
<template>
<div>
<!-- Scrollable page content-->
<f7-block-title>{{ title }}</f7-block-title>
<f7-block inner>
<ul id="example-murals">
<!-- this displays blank list items -->
<li v-for="item in items">
{{item.title}}
</li>
</ul>
<f7-block-title>Murals</f7-block-title>
<f7-list>
<!-- this won't even compile -->
<f7-list-item link="#" header="Name" title="{{ item.title }}" after="View" v-for="item in items">
{{ item.title }}
<f7-icon slot="media" icon="photo-icon"></f7-icon>
</f7-list-item>
</f7-list>
</f7-block>
</div>
</template>
<script>
import F7List from "framework7-vue/src/components/list";
export default {
name: 'Murals',
components: {F7List},
mounted() { // when the Vue app is booted up, this is run automatically.
var self = this;
let dataURL = 'https://jsonplaceholder.typicode.com/posts';
this.$f7.request.get(dataURL, function (data) {
self.items = data;
console.log(data);
});
},
data () {
return {
title: 'Murals',
items: []
};
}
};
</script>
Can you share your data response?
this should work fine:
<ul id="example-murals">
<!-- this displays blank list items -->
<li v-for="item in items">
{{item.title}}
</li>
</ul>
if you want to use it this way:
<f7-list>
<!-- this won't even compile -->
<f7-list-item link="#" header="Name" title="{{ item.title }}" after="View" v-for="item in items">
{{ item.title }}
<f7-icon slot="media" icon="photo-icon"></f7-icon>
</f7-list-item>
</f7-list>
You need to remove the curly brackets in the html tag;
<f7-list>
<!-- this won't even compile -->
<f7-list-item link="#" header="Name" title="item.title" after="View" v-for="item in items">
{{ item.title }}
<f7-icon slot="media" icon="photo-icon"></f7-icon>
</f7-list-item>
</f7-list>
sample JSON
Returns an array of objects.
The data i
// 20180718061323
// https://jsonplaceholder.typicode.com/posts
[
{
“userId”: 1,
“id”: 1,
“title”: “sunt aut facere repellat provident occaecati excepturi optio reprehenderit”,
“body”: “quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto”
},
{
“userId”: 1,
“id”: 2,
“title”: “qui est esse”,
“body”: “est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla”
},
]
Here’s my super-simple script (the f7-list component removed), the simple list produced blank list items until it runs out of memory.
I know this is something super-simple, but can’t figure it out. Thanks!
does the console shows some error? i will try to reproduce your code when i have time
No errors in the console.
I’ve been thinking about making my project open source, so that it can be used as a real-world example (list of places with photo, map, about page). Would you be open to collaborating with me on this?
yes, i will try to help you with the error