Set value to zero after null

Question

I have a problem displaying a zero value after null.

null is not displayed in the input, but if I change the value to 0, it also does not appear... Maybe I'm doing something wrong? Maybe someone came across this and is there a way to fix this problem? In the first input, I expect 0 to appear.

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/[email protected]/dist/autoNumeric.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

This has been fixed with a workaround by setting the value to '0'... But I think this is not good.

Answer 1

You can use the fallback system

In this way you can give a default value to your variable:

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

In case you don't want to change the value of your variable, do it at interpolation:

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

More information here:
JavaScript Variable fallback
How to display space instead undefined and null in vue.js template?