CODEWITHSUNDEEP
vue.js
user3732216
user3732216

Reputation: 1589

VueJS Value must be a number to be valid

I'm trying to figure out what is wrong with my logic because I have a field that is trying to validate that an input value submitted is a number. It hits the validateForm method however for some reason wrongNumber always comes back as true regardless if the value from the input is a number or a string.

Any ideas one what I've done wrong?

methods: {
    isNumeric: function (n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    },
    validateForm: function (event, $modal) {
        if (this.wrongNumber) {
            event.preventDefault();
            toastada.error('The squares field must contain a number value!');
            return;
        }
        this.saveData($modal);
        return true;
    },
    wrongNumber: function () {
        return this.isNumeric(this.number) === false
    },
  fetchInfo: function(){
    this.$http.get('/api/projects/info', { params: { id: this.id } }).then((response) => {
      this.project = response.data;
    });
  },
  saveData: function($modal){
    this.$http.patch('/api/projects/info', { project: this.project }).then((response) => {
      toastada.success('Changes Saved!');
      $modal.hide(this.modalName);
      return true;
    }, (response) => {
      toastada.error('Something went wrong, please try again!');
      return false;
    });
  },

Upvotes: 0

Views: 14492

Answers (1)

thanksd
thanksd

Reputation: 55634

This statement just evaluates whether the wrongNumber method exists on the Vue instance, which will always be true:

if (this.wrongNumber) {

You should call the method and evaluate the result:

if (this.wrongNumber()) {

Or, you might be getting the use of Vue methods confused with the use of Vue computed properties.

If you made wrongNumber a computed property, you could access the returned value via this.wrongNumber like you are trying to do:

methods: {
  isNumeric: function (n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  },
  validateForm: function (event, $modal) {
    if (this.wrongNumber) {
      event.preventDefault();
      toastada.error('The squares field must contain a number value!');
      return;
    }
    this.saveData($modal);
    return true;
  },
},
computed: {
  wrongNumber: function () {
    return this.isNumeric(this.number) === false
  },
}

Upvotes: 2

Related Questions