Vue: v-model undefined or default/fallback - vuejs2

Question

Is there anyway to set a default value to an input to the value of another input field in case it has been left empty.
Looks like I can't specify this in the data nor in the v-model attribute:
<template>
<div>
<input type="number" v-model="font1 || 14"> <!-- gives error -->
<input type="number" v-model="font2 || font1"> <!-- gives error -->
<input type="number" v-model="font3 || font1"> <!-- gives error -->
</div>
</template>
<script>
export default {
data() {
return {
font1: 14,
font2: this.font2 || this.font1, // this approach also gives error
font3: this.font3 || this.font1 // this approach also gives error
}
}
}
</script>
Any help is welcome.
Thanks.

Answer 1

There is probably 37 different ways of doing it.
The question is what is important, robustness, maintainability, ease of implementation, scalability etc.
Here is a solution that prioritizes ease of implementation. It relies on using #change and :value instead of the v-model magic.
This will leave font2 and font3 as null if they are not changed.
new Vue({
el: '#app',
data: {
font1: 14,
font2: null,
font3: null,
},
methods: {
isNumber(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) }
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="number" v-model="font1">
<input type="number" #change="font2 = $event.target.value" :value="isNumber(font2)?font2:font1">
<input type="number" #change="font3 = $event.target.value" :value="isNumber(font3)?font3:font1">
<pre>{{ {font1:font1, font2:font2, font3:font3} }}</pre>
</div>

Answer 2

You will have to use a combination of v-model and computed properties' getters and setters to achieve what you want.
Declare an internal data store for the fonts, let's call the f1, f2, and f3. Give f1 your default value of 14:
data: function() {
return {
f1: 14,
f2: null,
f3: null,
};
}
Now, when the component is mounted, you will want to interpolate the values accordingly. This can be done in the vm.mounted() callback:
mounted: function() {
// f2 takes the value of f1, if itself is falsy
this.f2 = this.f2 || this.f1;
// f3 takes the value of f2, if itself is falsy
this.f3 = this.f3 || this.f2;
}
The last step is to setup your computed properties, so that whenever font1, font2, or font3 changes, they will update the internal font data store appropriately:
computed: {
font1: {
set: function(val) {
if (val)
this.f1 = val;
},
get: function() {
return this.f1;
}
},
font2: {
set: function(val) {
this.f2 = val || this.f1;
},
get: function() {
return this.f2;
}
},
font3: {
set: function(val) {
this.f3 = val || this.f2;
},
get: function() {
return this.f3;
}
}
}
See proof-of-concept below:
Vue.component('test', {
template: '#test',
data: function() {
return {
f1: 14,
f2: null,
f3: null,
};
},
mounted: function() {
this.f2 = this.f2 || this.f1;
this.f3 = this.f3 || this.f2;
},
computed: {
font1: {
set: function(val) {
if (val)
this.f1 = val;
},
get: function() {
return this.f1;
}
},
font2: {
set: function(val) {
this.f2 = val || this.f1;
},
get: function() {
return this.f2;
}
},
font3: {
set: function(val) {
this.f3 = val || this.f2;
},
get: function() {
return this.f3;
}
}
}
});
new Vue({ el: '#app' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<test />
</div>
<script type="text/x-template" id="test">
<div>
<input type="number" v-model.number="font1">
<input type="number" v-model.number="font2">
<input type="number" v-model.number="font3">
</div>
</script>

Answer 3

You could use a Boolean set to false for both input 1 and input 2 elements and update it to true when a value is entered.
new Vue({
el: '#app',
data: {
font1: 14,
font2: {
value: 14,
defined: false
},
font3: {
value: 14,
defined: false
}
},
methods: {
Chg(font) {
if (font.value.length) {
font.defined = true;
return;
}
font.value = this.font1;
}
},
watch: {
font1() {
if (this.font2.defined === false) this.font2.value = this.font1
if (this.font3.defined === false) this.font3.value = this.font1
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="number" v-model="font1">
<input type="number" v-model="font2.value" #input="Chg(font2)">
<input type="number" v-model="font3.value" #input="Chg(font3)">
</div>