Currently, I am utilizing VueJS and facing a challenge with a form that consists of two fields. The first field requires user input, while the second field should calculate its value by passing the input from the first field through a method.
HTML
<div id="app">
<input type="text" v-model="value.label">
<input type="text" v-model="value.slug">
<!-- Slug value to display here -->
<br /><br />
{{value}}
</div>
Javascript
new Vue({
el:'#app',
data:{
value:{
label: '',
slug: '' // This value is calculated by passing label to santiize()
}
},
computed: {
},
methods: {
sanitize (label) {
return label+'something'
}
}
});
The scenario involves the user entering information into the first field, updating value.label
We aim to pass value.label through the sanitize() method in order to update value.slug. The new value should reflect immediately in the form field. However, I am uncertain about how to achieve this. If the user leaves the form field blank, an automatic value based on the description should be generated.
In addition, it would be beneficial to allow the user to manually override the result returned by the sanitize function by typing their own value in the form field. Hence, if the user decides to enter a custom value, it will take precedence over the calculated one.
I have prepared a fiddle for reference - https://jsfiddle.net/9z61hvx0/8/