Accessing a variable in vuejs or javascript

Question

I have this javascript variable, I'm using vuejs.

when I try to access an array field to validate a form, the chrome dev tools returns an error.

var checkItems = {contact_email: "", contact_name: "", contact_phone: "", message: "", subject_id: null, …}

I try to access this way:

if(checkItems.contact_email)
      alert("email required");

This is the error:

 Property or method "contact_email" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

If the form fields are empty, I want to detect individually which one is empty and send a custom error for each one, for example: Name field is empty The email field is empty

This is my vuejs code:

var locale = '{{ $lang }}'; //'es-ES',  

    var V_Alerts = new Vue({

        el : '#v-alerts',

        data : {

            types   : ['danger', 'warning', 'success', 'info'],

            alerts  : [
            ]
        },          

        methods : {

            add : function(type, content, opts)
            {                               
                this.alerts.push({
                    type : type,
                    content : content,
                    opts : opts
                });
            },

            addSuccess : function(content, opts){
                this.add('success',content, opts)
            }
        }
    });

    var new_ticket = new Vue({

        el      : '#create_ticket',

        data    : {
            uploading     : false,
            submitting    : false,
            subject_id    : null,
            message       : '',
            errors: [],
        },

        methods : {

            validation: function (params)
            {
                return {
                    contact_email : IsEmail(params.contact_email),
                    contact_name  : !!params.contact_name.trim(),                   
                    message       : !!params.message.trim(),
                    subject_id    : params.subject_id && !!params.subject_id.trim(),                    
                    captcha       : params.captcha !== 0
                }
            },

            isValid : function(params)
            {
                var validation = this.validation(params);

                return Object.keys(validation).every(function (key) {
                    return validation[key];
                });             
            },        

            restart : function()
            {
                this.uploading  = false;
                this.submitting = false;
                this.subject_id = null;                

                this.$refs.subjects.restart();
                this.$refs.uploads.restart();
                $('#message').text('');
                $('#order_number').val('');  

                $('#contact_email').val('');
                $('#contact_name').val('');
                $('#contact_phone').val('');
                $('#message').val(''); 
                grecaptcha.reset();     
            },            

            onSubjectSelect : function(subject_id){                
                this.subject_id = subject_id;                
            },

            _onSubjectsLoaded : function(subjects){                
                emitOnWidgetContentChanged();
            },


            createTicket : function(e)
            {                
                var params = {
                    contact_email : $('#contact_email').val(),
                    contact_name  : $('#contact_name').val(),
                    contact_phone : $('#contact_phone').val(),
                    message       : $('#message').val(),
                    subject_id    : this.subject_id,
                    message_files : this.$refs.uploads.completed_ids.join(','),
                    captcha       : grecaptcha.getResponse()                    
                };

                @if (Input::has('public_token'))
                    params.public_token = '{{ Input::get('public_token') }}';
                @endif

                if ($('#order_number').val() != '')
                    params.contact_orders = $('#order_number').val();

                if (!this.isValid(params))
                {
                    var checkItems = params;

                    if(checkItems.contact_email)
                        alert("email");

                    alert('{{ addslashes(trans('common.empty_or_error_input')) }}');                    
                    return;
                }                

                this.submitting   = true;
                // only ie11 need this manuall
                params._token = '{!! csrf_token() !!}'; 

                AjaxServices.post('createTicket', params, function(error, result)
                {                   
                    this.submitting = false;

                    if (error)
                    {
                        alert('{{  addslashes(trans('accounts/tickets.error_creating_ticket')) }}');                        
                        grecaptcha.reset();
                    }
                    else
                    {
                        alert('#'+ result.ticket_id +' - {{  addslashes(trans('accounts/tickets.new_ticket_created_ok')) }} :)');
                        V_Alerts.addSuccess('#'+ result.ticket_id +' - {{  addslashes(trans('accounts/tickets.new_ticket_created_ok')) }}');                        
                        this.restart();                        
                        emitOnWidgetContentChanged();

                    }
                }.bind(this));                
            },

            onUploadComplete : function(ids){
                this.uploading = false;      
                emitOnWidgetContentChanged();
            },

            onUploadStarted : function(){
                this.uploading = true;
                setTimeout(emitOnWidgetContentChanged,1);
            },

            onItemDeleted : function(){

            },

            onFilesSelected : function(){               
            }                 
        }
    });

      function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
  }     

    $(document).ready(function(){
        //new_ticket.restart();
    });

Using jQuery and Vue interchangebly is missing the point in my opinion. Throw away jQuery and hop on the Vue boat completely. You won't be disappointed. You can do all this $.val() stuff by using v-model and v-bind. — Imre_G
– Imre_G, Commented Mar 9, 2018 at 8:58

skribe · Accepted Answer · 2018-03-09 08:52:56Z

1

You are not utilizing Vue properly. The error you are receiving stems from not defining your properties in the data object. You cant just return them as you are in the validation method because Vue is looking for a data object called contact_email, or a method called contact_email() or even a computed property called contact_email.

  data    : {
          // define your properties here
          contact_email: '';
    },
  methods: {
     yourMethod: function(){
         //modify your properties here
         this.contact_email: IsEmail(params.contact_email)
       }
  }

answered Mar 9, 2018 at 8:52

skribe

3,6254 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing a variable in vuejs or javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related