Javascript, чтобы проверить, является ли числовое значение нулевым (и не нулевым) или выше, но не отрицательным

Question

Я пытаюсь определить, является ли значение, введенное в HTML-ввод (type = "number"), нулевым или выше, но не отрицательным.Я делаю это с помощью Vue, и у меня есть следующий пример Песочницы:

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

Код ошибки в файле 'App.vue'.

У меня естьdata свойство, называемое inputNumber, и изначально оно установлено на null.Есть поле ввода, где пользователь может ввести значение (которое, в свою очередь, привязано (используя v-model с модификаторами trim и number)) к входу.

У меня тогда есть computedСвойство, которое возвращает результат проверки (return Number(this.inputNumber) >= 0. Это нормально работает, когда значение inputNumber меньше 0 (есть ошибка) или больше 0 (есть положительный результат).Если введено 0, оно должно вернуть положительное сообщение, так как это должно быть «количество», которое может ввести пользователь. В настоящее время сообщение не отображается при вводе 0.

Любая помощь очень ценится.

Answer 1

inputNumber будет ложным, если он равен 0 здесь:

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

Вот почему он не отображается.

Чтобы исправить это, мы можем заменить эту строку на

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

и инициализировать inputNumber с помощью ''

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

Если мы оставим это значение как нулевое, после того как вы введете значение и очистите поле ввода, inputNumber больше не будет иметь значение null и будет "действительным"будет продолжать появляться.

Answer 2

Заменить

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

на

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

Проверка if inputNumber вернет false, если она 0.

---

EDIT

Расширьте проверку isValid, как показано ниже, с учетом значения null, а также пустого значения (когда текстовое поле очищается).

computed: {
    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>