CODEWITHSUNDEEP
javascripthtmlvue.jsvuetify.js
chuckd
chuckd

Reputation: 14610

How to update vue.js v-data-table and update column value with new text

New to Vue and I have a v-data-table with a column I want updatable but not sure how! I can pass any/all of the property values but can't seem to figure out how to pass the updated text when the user changes it.

How do I get that value when I have multiple rows with this column? I can do it for one field, but this is in a table with many rows.

here is the column

<td>
  <v-text-field 
   v-model="props.item.productAnnotation" 
   // how do I pass the new text into the first parameter?
   @input="inputAnnotation(??????, props.item.id)" 
   :disabled="!editMode" 
   :readonly="!editMode">
  </v-text-field>
</td>

and here is the method

inputAnnotation(text, recordProductId) {
  axios.patch('/api/RecordProducts/' + recordProductId, [{
    'op': 'replace',
    'path': '/annotation',
    'value': text
  }]).then(function(response) {
    // Show response
    console.log(response);
  }).catch(function(error) {
    // Show error
    console.log(error);
  })
},

Upvotes: 1

Views: 4473

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29179

Try (depending on the source)

@input="inputAnnotation($event.target.value, props.item.id)"

or 

@input="inputAnnotation($event, props.item.id)"

And also remove your v-model and replace it with a bind to setting the value

:value='props.item.productAnnotation'

$event contains the data sent with the emitted message input.

v-model will handle this for you by assigning the value to a data property though. v-model is just sugar for connecting :value and @input to a common property, and handles a few extra edge cases.

In a nutshell v-model creates a v-bind:value and sends changes from its bound data to the value property of the child component. It then creates @input and listens for the event to be emitted. When received, it updates the property. This is done so the parent can own the data. The child cannot update the property, so must emit an event for the parent to change it. As strange as it may seem, it creates a very clean architecture where only the owner can update the value. And this is one of the core tenants of Vue.

Upvotes: 2

Related Questions