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
- [Vuejs]-Vue 3 class attribute appears to ignore ref
- [Vuejs]-What is the best practice to pass null to a required props in component in vuejs?
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' },
]
Source:stackexchange.com