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

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
Как отобразить пространство вместо неопределенного и пустое в vue.jsшаблон