I'm trying to determine if a value entered into a HTML input (type="number") is zero or above, but not negative. I'm doing this using Vue, and have the following Sandbox example:

The offending code is in 'App.vue' file.

I have a data property called inputNumber and this is initially set to null. There's an input field where the user can enter a value (which is in turn bound (using v-model with trim and number modifiers)) to the input.

I then have a puted property that returns the result of a check (return Number(this.inputNumber) >= 0. This works fine when the value of inputNumber is either less than 0 (there's an error shown) or greater than 0 (there's a positive result shown). If 0 is entered it should return a positive message, as that should be an 'amount' that the user can enter. Currently no message is shown when 0 is entered.

Any help is greatly appreciated.

I'm trying to determine if a value entered into a HTML input (type="number") is zero or above, but not negative. I'm doing this using Vue, and have the following Sandbox example:

https://codesandbox.io/s/2zxkm6j0vp?fontsize=14

The offending code is in 'App.vue' file.

I have a data property called inputNumber and this is initially set to null. There's an input field where the user can enter a value (which is in turn bound (using v-model with trim and number modifiers)) to the input.

I then have a puted property that returns the result of a check (return Number(this.inputNumber) >= 0. This works fine when the value of inputNumber is either less than 0 (there's an error shown) or greater than 0 (there's a positive result shown). If 0 is entered it should return a positive message, as that should be an 'amount' that the user can enter. Currently no message is shown when 0 is entered.

Any help is greatly appreciated.

• javascript
• vue.js
• numbers

• Where's the problem? – Jorge Fuentes González Commented Feb 28, 2019 at 21:35
• If zero (0) is entered it should return a positive message, as that should be an 'amount' that the user can enter. Currently no message is shown when zero is entered. – Neil Merton Commented Feb 28, 2019 at 21:37
• Oh I see. pfx answer is good. – Jorge Fuentes González Commented Feb 28, 2019 at 21:49
• I don't know much about VUE but based on your code, it looks like view is ignoring 0 as a value altogether so that your pute function gets null as the value for this.inputNumber – richbai90 Commented Feb 28, 2019 at 21:50
• 1 don't paste code off-site – Mulan Commented Feb 28, 2019 at 22:15

2 Answers 2

Replace

<p v-if="inputNumber && isValid">{{ inputNumber }} is valid</p>

by

<p v-if="isValid">{{ inputNumber }} is valid</p>

The if inputNumber check will return false when being 0.

Extend the isValid check as below, taking into account the nullvalue and also an empty value (when the textfield gets cleared).

puted: {
    isValid() {      
        return (this.inputNumber !== null)  && (this.inputNumber !== '') && (+this.inputNumber >= 0);      
}

<p v-if="isValid">{{ inputNumber }} is valid</p>
<p v-else-if="!isValid">{{ inputNumber }} is not valid</p>

inputNumber will be false if it equals 0 here:

<p v-if="inputNumber && isValid">{{ inputNumber }} is valid</p>

That's why it doesn't show.

To fix that we can replace that line with

<p v-if="inputNumber !== '' && isValid">{{ inputNumber }} is valid</p>

and initialize inputNumber with ''

data() {
  return {
    inputNumber: ''
  }
},

If we leave it as null, once you input a value and the empty the input field, inputNumber won't be null anymore and "is valid" will keep showing up.