CODEWITHSUNDEEP
javascriptvue.js
Grumbunks
Grumbunks

Reputation: 1267

How to pass more than just the new value in a change event on an input?

I'm generating a form with VueJS dynamically from a JSON schema and trying to send the data into my Vuex state.

Here's my code so far (simplified)

<div v-for="field in schema" :key="field.fieldName">
  <div> {{ field.fieldName }} </div>
  <div v-if="field.type==='text'">
    <b-input type="text" @change="onFieldChanged" :placeholder="field.fieldName"></b-input>
  </div>
</div>

And my onchange method is:

methods: {
  onFieldChanged (val) {
    // send val to the state to put it in the form object
  }
}

Ideally what I'd like is to also be able to send my v-for's field.fieldName to define exactly what has been changed. Is there a way to do this?

I imagine another way would be to use v-model to associate the fields directly and their values to an object in my data, this occurred to me just as I typed this.

Upvotes: 0

Views: 952

Answers (1)

Igor Moraru
Igor Moraru

Reputation: 7729

The v-on directive provide a $event object with the value emitted, so you can use it in template to call the event handler with additional params:

<b-input type="text" @change="onFieldChanged($event, field.fieldName)" :placeholder="field.fieldName"></b-input>

And:

methods: {
  onFieldChanged (val, fieldname) {
    // send val to the state to put it in the form object
  }
}

Upvotes: 3

Related Questions