如何在 vue js v-model 中绑定 function？

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

and the last thing is you have to bind input event from your text field

you can read $emit or v-bind documentation about it