0
224
ViewsHow to bind function in vue js v-model?
I asked a question which might be unclear to someone. So, I deleted that question and ask again with new approach. I have an API response something like this:
{
id: 2,
name: 'Item 1',
items: [
{
slug: 'Phase 1',
values: [
{
highValue: '12',
lowValue: '8',
color: 'red'
},
{
highValue: '15',
lowValue: '5',
color: 'green'
}
]
},
{
slug: 'Phase 2',
values: [
{
highValue: '14',
lowValue: '6',
color: 'red'
},
{
highValue: '15',
lowValue: '5',
color: 'green'
}
]
}
]
},
{
id: 3,
name: 'Item 2',
items: [
{
slug: 'CBC',
values: [
{
highValue: '10',
lowValue: '7',
color: 'green'
},
{
highValue: '12',
lowValue: '3',
color: 'red'
}
]
}
]
}
I have static block for High Value, Low Value, Red & Green in my HTML. So, for those static blocks, I need to pick appropriate value from the response. For example, for High Value & Red block, I need to pick highValue from the response when color: 'red'. So, I write four function for example:
redHigh (item) {
const res = item.filter(obj => {
return obj.color === 'red'
})
return res[0].highValue
}
Now, I tried to bind the function in v-model like this way:
<v-text-field
outlined
:v-model="redHigh(sub.values)"
placeholder="High"
></v-text-field>
But, that was not working. If I wrote :value instead of :v-model, that would work. But, in that case I don't get the changed value after clicking save button.
save (formIndex) {
console.log(this.items[formIndex])
}
How to solve that?
1 answers
Answer question0
v-model is not for a function; it's for a Vue's data property.
However, I understand your app requirement.
You just need to create Vue computed properties, that can generate a dynamic array using a custom function bind input event from your text field
you can read $emit or v-bind documentation about it
I just read the API of v-text-field component here https://vuetifyjs.com/en/api/v-text-field/#props.
Just need to update it to use value prop and bind change event
Which is would be like this
<div v-for="(sub, index) in item.items" :key="sub.slug">
<v-text-field
outlined
:value="redHigh(sub.values)"
@change="updateSubValue(index, 'red', 'high')"
placeholder="High"
></v-text-field>
updateSubValue(index, color, value) {
// find current sub by index
// find current value's key by color and value
// update vue data
}
It might index first, been a long time I don't develop the Vue app
<div v-for="(index, sub) in item.items" :key="sub.slug">
Or you can find the current sub by slug, no need to add index