Vue.js – ScreenshotMaker part 2 (using Jade with Vue.js, call variables)

Each project needs evolution. After a comment by Peter van Meijgaard (https://github.com/petervmeijgaard) in previous post (https://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:

sudo npm i jade --save

Now you can bring your JADE code in template section: