Question

我有这个javascript变量，我正在使用vuejs。

当我尝试访问数组字段以验证表单时，chrome dev工具会返回错误。

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

我尝试以这种方式访问：

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

这是错误：

 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

如果表单字段为空，我想单独检测哪一个为空，并为每个字段发送自定义错误，例如：名称字段为空电子邮件字段为空

这是我的vuejs代码：

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();
    });

Answer 1

您没有正确使用Vue。您收到的错误源于未在数据对象中定义属性。您不能像在validation方法中那样返回它们，因为Vue正在查找名为contact_email的数据对象，或者名为contact_email()的方法，或者甚至是名为{{1}的计算属性}。

contact_email

在vuejs或javascript中访问变量

1 个答案: