Recently diving into Vue and came across an intriguing issue, I am curious to know the reason behind it and how to prevent it.
<template>
<div>
<input type="number" v-model="a" style="color: white" />
<input type="number" v-model="b" style="color: white" />
<p style="color: white">{{ c }}</p>
</div>
</template>
<script>
export default {
data() {
return {
a: 1,
b: 2
};
},
computed: {
c: function() {
return this.a + this.b;
}
}
};
</script>
Upon initial display, 'c' shows as '3', which aligns with my expectations. However, upon altering one of the inputs, the two values get concatenated instead of computed. For instance, if I modify 'a' to '11', I anticipate the value to be 13, but instead I receive '112'. What is causing this behavior?