如何在Vue中以动态形式向特定输入添加更改事件？答案

【问题标题】：How to add a change event to specific inputs in dynamic form in Vue?如何在Vue中以动态形式向特定输入添加更改事件？
【发布时间】：2021-05-10 15:55:50
【问题描述】：

我想以动态形式向其中两个输入添加更改事件。目前，每个输入都会触发更改事件。有没有办法指定输入 'Shared' 和 'Recent' 将触发更改事件，但不会触发其他事件？

 <v-input
        v-for="item in state.items"
        :key="item.id"
        @change='triggerChange'
      >
 </v-input>
 state: () => ({
  items: [
    { text: 'My Files', id: '1'},
    { text: 'Shared', id: '2' },
    { text: 'Starred', id: '3' },
    { text: 'Recent', id: '4' },
    { text: 'Offline', id: '5' },
    { text: 'Uploads', id: '6' },
    { text: 'Backups', id: '7' },
  ],
})
   const triggerChange = () => {
  <something happens>
   }

【问题讨论】：

标签： vue.js vuetify.js vue-composition-api

【解决方案1】：

@change 可以根据当前项目获取条件，如下所示：

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

【讨论】：

好吧，这是有道理的。 'void 0' 代表什么？
它只是表示 void 函数（零我不确定我是如何让它工作的，我在某处看到它并忘记了它的意思）
此外，如果该函数没有触发，您可能必须使用 triggerChange(item) 调用它，而不仅仅是在我的示例中使用 triggeChange
void 0 计算结果为未定义，您也可以写为() => {}
是的，这两者确实可以达到相同的目的（我只记得我喜欢在其中放置 void 对我来说看起来更好）

【解决方案2】：

为了尽量减少模板中的逻辑，我只需在事件处理程序中检查这个条件：

<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}
}

【讨论】：

【解决方案3】：

您可以将具有真值的属性enableChange 添加到您希望在change 事件上触发triggerChange() 处理程序的两项。然后，您可以利用短路评估来有条件地绑定事件。

<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' },
]

【讨论】：