Inspired from several example, I'm trying to write a custom component that formats it's value with a specific method.
Here's the component:
<template>
<input
type="text"
v-model="inputValue"
/>
</template>
<script type="text/javascript">
import {formatPhoneNumber} from '~/utils/string';
export default {
computed: {
inputValue: {
get() {
return formatPhoneNumber(this.value)
},
set(value) {
this.$emit('input', formatPhoneNumber(value))
}
}
},
}
</script>
I'm using Vuex, and I call the component this way in the parent component:
<PhoneInput :value="cellPhoneNumber" class="input" @input="addCellPhoneNumber" />
computed: {
cellPhoneNumber() {
return this.$store.state.identity.cellPhoneNumber;
},
},
methods: {
addCellPhoneNumber: function(phoneNumber) {
this.$store.commit('identity/addCellPhoneNumber', phoneNumber)
},
}
The set part works, it goes to the store, but the data comes back to the component, cellPhoneNumber is called, but not inputValue#get.
Since it might be related to the fact that I use @input/:value in the parent component, I tried to use it also on it's child component:
<template>
<input
@input="formatValue"
type="text"
:value="formattedValue"
/>
</template>
<script type="text/javascript">
import {formatPhoneNumber} from '~/utils/string';
export default {
computed: {
formattedValue: function(){
return formatPhoneNumber(this.value)
},
},
methods: {
formatValue(e) {
this.$emit('input', formatPhoneNumber(e.target.value))
}
}
}
</script>
Without success, the same thing happens.
Can someone tell me what's going wrong?
propdefinition in the component that expectsthis.value, so it's not reactive.propswere optional, simply adding constraints or warnings instead of having a real behavioral impact.