How to bind function in vue js v-model?

Question

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?

Codepen Demo

Answer 1

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