Vue.js: Unlock Advanced Techniques with ScreenshotMaker Part 2 – Using Jade and Calling Variables | Piotr Sikora | Front End Developer JavaScript Enthusiast Piotr Sikora Kielce

Read Time:1 Minute, 50 Second

Each project needs evolution. After a comment by Peter van Meijgaard (https://github.com/petervmeijgaard) in previous post (http://fedojo.com/vue-js-first-look-and-test/) Ive made a few changes.

Changes in variables

Previously:

>makeScreenshot: function(e) {
                    this.$set('form', false);
                    this.$set('inprogresss', true);

                    Vue.http.get('http://localhost:8888/screenshot?url='+this.url).then((response) => {
                        var res = JSON.parse(response.body);
                        this.$set('success', true);
                        this.$set('inprogresss', false);
                    }, (response) => {
                        this.$set('error', true);
                        this.$set('inprogresss', false);
                    });
}

Current:

methods: {
                makeScreenshot: function(e) {
                    this.form = false;
                    this.inprogress = true;

                    Vue.http.get('http://localhost:8888/screenshot?url='+this.url).then((response) => {
                        var res = JSON.parse(response.body);
                        this.success = true;
                        this.inprogress = false;
                    }, (response) => {
                        this.error = true;
                        this.inprogress = false;
                    });
                }
            }

So the changes are visible in each call to variables defined in data function:

data(){
                return {
                    form: true,
                    error: false,
                    success: false,
                    inprogress: false,
                    url: ''
                }
},

It doesnt need usage:

this.$set('success', true);

It can be done with:

this.success = true;

Usage of JADE instead raw HTML

I love preprocessors and wished to use JADE templating. It is possible in Vue.js to define template in .vue file as a JADE. To do that you need to add JADE to your node_modules:

<pre class="line-numbers"><code class="language-javascript">sudo npm i jade --save
</code></pre>

Now you can bring your JADE code in template section:

<template>
    p This is screenshotmaker!
    div(v-if="form")
        input(v-model="url", placeholder="URL")
        button(v-on:click="makeScreenshot") Make screenshot
    div(v-if="error")
        p Error
    div(v-if="success")
        p Screenshot done!
    div(v-if="inprogress")
        p In progress
</template>

<script lang="babel">
    import Vue from 'vue';

    export default{
        data(){
            return {
                form: true,
                error: false,
                success: false,
                inprogress: false,
                url: ''
            }
        },
        methods: {
            makeScreenshot: function (e) {
                this.form = false;
                this.inprogress = true;

                Vue.http.get('http://localhost:8888/screenshot?url=' + this.url).then((response) => {
                    var res = JSON.parse(response.body);
                    this.success = true;
                    this.inprogress = false;
                }, (response) => {
                    this.error = true;
                    this.inprogress = false;
                });
            }
        }
    }

Changes are visible in https://github.com/fedojo/screenshot-maker-fe-vue/tree/v0.2-jade