How to add to array from method in vue.js?

Question

I'm having a weird proplem that I can't understand

I have a registration form, and on any input I'm executing the method on blur;

<input class='form-control' placeholder='Username' @blur="watchVal" v-model="username">

Method

watchVal : function(){
  if(this.username == ""){
    this.errors['username'].push('Username is empty');
  }
}

Data:

data: function(){
  return {
    username: "",
    errors: {
      'username' : []
    }
  }
}

When I blur without writing any value, nothing is added to this.errors['username'], unless I type a letter in any field.

I've also tried to make validation on submit, but found same problem that no error is added to the array unless I type in any input,

Can anyone explain to me what I am doing wrong??

I mean after blur your input, have you seen that errors.username data update or not? — Shahadat Hossain
– Shahadat Hossain, Commented Feb 25, 2020 at 6:37
@ShahadatHossain Yes , It doesn't update until I write in any input — SelvsterTP
– SelvsterTP, Commented Feb 25, 2020 at 6:39

Shahadat Hossain · Accepted Answer · 2020-02-25 06:57:25Z

1

I faced similar issue. How I solved this.

your data:

data: function(){
return {
  username: "",
  errors: {}
  }
}

your Method

watchVal (key) {
  let errors = this.errors
  if (this[key] === '') {
    errors[key].push('Emai empty')
  }

  this.errors = errors
}

your HTML

<input class='form-control' placeholder='Username' @blur="watchVal('username')" v-model="username">
<p>{{errors['username']}}</p>

You must display error variable in your HTML template then it will be solved.

answered Feb 25, 2020 at 6:57

Shahadat Hossain

97910 silver badges27 bronze badges

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

Comments

glinda93 · Accepted Answer · 2020-02-25 06:57:32Z

Your source is working. See in full mode if you cannot see error messages.

new Vue({
  el: "#app",
  data: function() {
  	return {
    	username: '',
      errors: {
      	username: []
      }
    }
  },
  methods: {
  	watchVal : function(){
  		if(this.username == ""){
    		this.errors['username'].push('Username is empty');
  		}
		}
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input class='form-control' placeholder='Username' @blur="watchVal" v-model="username">
  <p class="text-sm text-danger" v-for="(error, index) in errors.username" :key="index">
    {{ error }}
  </p>
</div>

Collectives™ on Stack Overflow

How to add to array from method in vue.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related