vue.js - Javascript to check if a number value is zero (and not null) or above but not negative - Stack Overflow

admin管理员组

文章数量:1402280

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

Share Improve this question Follow edited Feb 28, 2019 at 21:39 Neil Merton asked Feb 28, 2019 at 21:31 Neil MertonNeil Merton 57344 silver badges1919 bronze badges 5

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

---

EDIT

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.

本文标签： vuejsJavascript to check if a number value is zero (and not null) or above but not negativeStack Overflow