Установить нулевое значение после нуля

Question

У меня проблема с отображением нулевого значения после null.

nullне отображается во вводе, но если поменять значение на 0, оно тоже не отображается... Может я что-то не так делаю? Может кто сталкивался с этим и есть ли способ исправить эту проблему? Я ожидаю, что в первом вводе появится 0.

new Vue({
 el : '#app',
 data() {
  return {
   value : null,
   valueString: null,
  };
 },
 components: {
  VueAutonumeric,
 },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/autonumeric@4.5.7/dist/autoNumeric.min.js"></script>
<script src="https://unpkg.com/vue-autonumeric@1.2.6/dist/vue-autonumeric.min.js"></script>

<div class="container">
 <div id="app">
  
  <p>Value is {{value}}</p><br>
  <vue-autonumeric :options="''" v-model="value"></vue-autonumeric>
  <button @click="() => value = 0">Set Zero</button>
  
  <p>ValueStrign is {{valueString}}</p><br>
  <vue-autonumeric :options="''" v-model="valueString"></vue-autonumeric>
  <button @click="() => valueString = '0'">Set '0'</button>
  
 </div>
</div>

Это было исправлено путем установки значения "0"... Но я думаю, что это плохо.

Answer 1

Вы можете использовать резервную систему

Таким образом, вы можете присвоить своей переменной значение по умолчанию:

data() {
  return {
    value : null || 0,
    valueString: null || "0",
  };
}

Если вы не хотите изменять значение своей переменной, сделайте это при интерполяции:

<p>Value is {{value || 0}}</p>
<p>ValueStrign is {{valueString || "0"}}</p>

Дополнительная информация здесь:
Резервный вариант переменной JavaScript
Как отобразить пробел вместо undefined и null в шаблоне vue.js?