CODEWITHSUNDEEP
vue.jsphonegaphtml-framework-7
Tac Tacelosky
Tac Tacelosky

Reputation: 3430

Load AJAX in Framework7, vue

I'm very new to Framework7, and want to build a fairly simple mobile app -- a list of places, detail pages of those places (where some murals are displayed), 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>

Upvotes: 1

Views: 824

Answers (1)

Djiggy
Djiggy

Reputation: 602

You're code is almost right ! To access to F7 app instance with vue, you have to use this.$f7.request rather the app.request

Upvotes: 2

Related Questions