[Vuejs]-How to add a change event to specific inputs in dynamic form in Vue?

1👍

@change can take a condition based on current item like so:

 <v-input
        v-for="item in state.items"
        :key="item.id"
        @change="item.id =='2' || item.id == '4' ? triggerChange : () => void 0"
 >

1👍

To keep the logic in template minimal, I’d just check this condition inside the event handler:

<v-input
        v-for="item in state.items"
        :key="item.id"
        @change='triggerChange(item)'
      >
 </v-input>

// ...

const triggerChange = (item) => {
  if(!(item.id == 2 || item.id == 4)) { return}
}
👤T J

1👍

You could add a property enableChange with a truthy value to the two items for which you want the triggerChange() handler to be triggered on the change event. You can then exploit short-circuiting evaluation to conditionally bind the event.

<v-input
    v-for="item in state.items"
    :key="item.id"
    @change="item.enableChange && triggerChange"
></v-input>

// ...

items: [
    { text: 'My Files', id: '1'},
    { text: 'Shared', id: '2', enableChange: true },
    { text: 'Starred', id: '3' },
    { text: 'Recent', id: '4', enableChange: true },
    { text: 'Offline', id: '5' },
    { text: 'Uploads', id: '6' },
    { text: 'Backups', id: '7' },
]

Leave a comment