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

Saiqul Haq · Accepted Answer · 2021-12-10 02:56:29Z

2

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

edited Dec 10, 2021 at 2:56

answered Dec 9, 2021 at 16:19

Saiqul Haq

2,42719 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1896653 Over a year ago

But, we can't pass parameters to computed properties.

mbokil Over a year ago

One way to do what you are trying is to use Array.map() on your data and create another property like redHigh. Then you can set v-model="item.redHigh" This would make redHigh property two way binding. If you need to save the data later you then process the array and convert the property to a value you need.

Saiqul Haq Over a year ago

@user1896653 please check my updated answer

Robert Harvey Over a year ago

Can you fix your punctuation and capitalization, please?

Saiqul Haq Over a year ago

done @RobertHarvey, am I right?

|

Collectives™ on Stack Overflow

How to bind function in vue js v-model?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest