1

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/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>

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

Zeroox
  • 67
  • 5
  • 2
    Put the relevant code in the question, not some third party site. – epascarello Oct 07 '19 at 13:33
  • 1
    To wit, Stack Overflow has a "snippet" feature that's basically exactly the same as a codepen but runs directly in the question. [Edit your question](https://stackoverflow.com/posts/58270575/edit) and hit the button with an icon that looks like `<>` and you'll see. That said, what you've done is also acceptable: relevant code directly in the question and extra link outside. – msanford Oct 07 '19 at 13:36

1 Answers1

0

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?

Alexandre
  • 11
  • 3
  • This is of course a good solution, but sometimes I need to keep a value of zero. If set the initial construct to `null || 0`, then I can’t change this value to 0 or vice versa from 0 to null (by the way, any other value works... wtf...) – Zeroox Oct 07 '19 at 17:06
  • And I also can’t keep the value `null` but show 0 - the user will be surprised because he did not set a value, but 0 is displayed – Zeroox Oct 07 '19 at 17:09