VueJS, check if field not empty?

methods: {
    sendPayment: function(e) {
        if(this.to) {
            // do your post
        }
    }
}

A simple if statement should be sufficient enough to check if it's null or not.

Yeah @JoeDawson that's what I thought, just didn't look right for some reason so just wanted to check, obviously me over complicating things (again)

:)

@JoeDawson So I now have

sendSMS: function(e) {
            if(this.to) {
                this.$http.post('/demo/send', message)
            }
}

But I need this to do the post without any button been clicked, how would I achieve such a thing, basically when the input is not empty and has a value then do the post request, no need for a button to be pressed.

Also need to have some way of saying if this field is not empty, no submit button is pressed but the user leaves the screen or clicks the back button to then fire the post request

Anyone know a way to do this?

I believe something like

$( window ).unload(function() {
       return "Bye now!";
});

Would work, but I need to check the input to is not empty and if the user moves away from the active screen then I can do a post request or something, how can I do this?

Anyone? Desperately looking to get this part done.

Either put it in a computed or watch section.

Mmmm, not sure how.

But with that said been toying around with the following:

ready:function(){
        window.onbeforeunload = this.leaving;
        //window.onmouseleave = this.leaving;
        window.onblur = this.leaving;
    },

    methods: {
        leaving:function(){
            console.log('User moved away');

            // return null;
        }

But need to be when the mouse leaves the website window, to either the tabs, back button, bookmarks toolbar and do this once per visit.

So this window.onblur = this.leaving; works if I move from one tab to another but need it to work when the user moves away from the site window itself.

This is one of my approach for this:

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({
    el: '#npl-login',
    data:
    {
        fields: {
            email: '',
            password: '',
            remember: false
        },
        errors: {
            email: {
                required: '',
                mustBeValid: ''
            },
            password: ''
        }
    },
    computed:
    {
        isValid: function ()
        {
            $("#frmLogin").validate({
                rules: {
                    email: {
                        required: true,
                        email: true
                    },
                    password: "required"
                },
                messages: {
                    email: {
                        required: this.errors.email.required,
                        email: this.errors.email.mustBeValid
                    },
                    password: this.errors.password
                }
            });

            return $("#frmLogin").valid();
        }
    },
    methods:
    {
        handleLogin: function ()
        {
            if (this.isValid) {

                this.$http.post('/login', { email: this.fields.email, password: this.fields.password, remember:this.fields.remember }).then(function (response)
                {
                    if (response.status == 200) {
                        location.href  = response.data.intended;
                    }
                },
                function (response)
                {
                    swal({
                        title: response.data.title,
                        text: response.data.message,
                        type: "error",
                        confirmButtonColor: "#DD6B55",
                    });
                });
            }
        },
    }
});

The problem here is I had to use jQuery for validation, but the good part is that is an easy task in vuejs, like so:

data:
    {
        fields: {
            email: '',
            password: '',
            remember: false
        },
}


 computed:
    {
        isValid: function ()
        {
        for (var key in fields) {
            
            if ( ! fields[key] ) return false;      
}
return true;
}
}

I've got the following

data: {
        to: '',
        from: '',
        message: ''
    },
    data:function(){
        return {sentRequest:false}
    },
    ready:function(){
        window.onbeforeunload = this.leaving;
        window.onmouseleave = this.leaving; // Does nothing, no console logging
    },

    methods: {
        leaving:function() {
            if (!this.sentRequest) {
                //do stuff
                console.log('User moved away');
                this.sentRequest = true;
            }
            return null;
        }
}

Which works to a certain point when using window.onblur = this.leaving; but track every mouse movement inside the window, rather than outside the window.

So still none the wiser on this! I'm really looking for more advise/help on this on what the script should be. I.e the window.whatever so that soon as the mouse is moved away from the window (but not the browser) it then does the task in hand

Anyone know how I can do this please :(

For anyone interested I got this working by doing:

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({
    el: '#demo-app',

    data: {
        to: '',
        from: '',
        text: '',
        sentRequest: false
    },

    ready:function(){
        window.onbeforeunload = this.leaving;
        window.onblur = this.leaving;
    },

    methods: {
        leaving:function() {
            if (! this.to) {

                var p = this.$http.post('/demo/send', { to: this.to, from: this.from, text: this.text });
                this.sentRequest = true;
            }
            return null;
        }
    }
});

new Vue({

el : '#vue-app',
data : {
    names: ['mohamad','ali','Ahmed','Issa','Mahmoud'],
    newName:''
},
methods:{
    addName() {
        
        
        if(this.newName ===""){
            alert('You Dont Can Add Empty Value To The Array');
        } else{
            this.names.push(this.newName);
            this.newName ='';
        }
        
    }
    
    

} });