Due to the limited information available, I will be making a number of assumptions in my response.
TLDR
To achieve the desired functionality, you can have the method return an object and then execute it in your template, or utilize a computed property that returns an object.
Example (props are functions)
An example implementation could resemble the following (based on the assumptions made):
<script>
export default {
/* other options */
methods: {
/* other methods */
formatter() {
const format = (value) => new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR' }).format(value);
const parser = (value) => parseFloat(value);
return {
currency: {
format,
parser,
},
};
}
},
}
</script>
Using the above method, you can implement the following in your template:
<MyInput
:formatter="formatter().currency.format"
:parser="formatter().currency.parser"
/>
The props formatter and parser will each be assigned two functions as defined within the returned Object.
Less boilerplate
To further reduce redundancy, consider the following approach:
<script>
export default {
/* other options */
methods: {
/* other methods */
formatter() {
const formatter = (value) => new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR' }).format(value); // matching the prop name 'formatter'
const parser = (value) => parseFloat(value);
return {
currency: {
formatter, // matching the prop name 'formatter'
parser,
},
};
}
},
}
</script>
In your template:
<MyInput v-bind="formatter().currency" />
This will bind formatter.currency.formatter to the prop formatter, and similarly bind formatter.currency.parser to the prop parser.
Value is in parent component
If the props in MyInput need to be values instead of functions, and the value requiring parsing/formatting is stored within the data option of the parent component:
<script>
export default {
/* other options */
data() {
return {
/* other data */
myNumberValue: '9001' // It's actually over 9000
}
},
methods: {
/* other methods */
formatter() {
const value = this.myNumberValue;
const formatter = new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR', }).format(value);
const parser = parseFloat(value);
return {
currency: {
formatter,
parser,
},
};
},
},
};
</script>
Does this provide a satisfactory answer to your question?