javascript - 在 Vuetify 组合框中通过 @change 传递目标元素

Question

我需要通过 updateTags 方法传递目标事件。下面是组合框:

当我调用comboActive 方法时，我可以获得目标事件。

KeyboardEvent {isTrusted: true, key: "y", code: "KeyY", location: 0, ctrlKey: false, ...}

注意，组合框中的 comboActive 方法不发送任何参数，但在方法 comboActive(event) 中我可以获得目标事件。

我希望能够在 updateTags 方法中获取目标事件。如您所见，我已尝试使用 $event 但这不起作用

HTML:

<v-combobox multiple
  v-model="select[i]"
  append-icon
  small-chips
  deletable-chips
  @keyup="comboActive"
  @paste="updateTags(item,i)"
  @change="updateTags(item,i,$event)">
</v-combobox>

脚本:

comboActive(event) {
  console.log('active ', event)
  event.target.parentElement.classList.add('saving')
},
updateTags(item, i, e) {
  this.$nextTick(() => {
    this.$nextTick(() => {
      console.log('complete ', item, e)
    })
  })
},

当我添加 $event @change="updateTags(item,i,$event)" 时，我得到了项目数组。我需要组合框本身，以便我可以删除在 comboActive 方法期间添加的类。

Answer 1

我建议使用 class binding处理此问题，或使用 color 计算属性并通过添加名为 saving 的数据属性有条件地更改它并在 @change 处理程序中更新它喜欢:

   <v-combobox
             :color="color"
         ...
         @change="saving=true"
        ></v-combobox>

脚本

 data () {
      return {
        
        saving:false,
        select: ['Vuetify', 'Programming'],
        items: [
          'Programming',
          'Design',
          'Vue',
          'Vuetify',
        ],
      }
    },
  computed:{
    color(){
      return !this.saving? 'red':'grey'
    }
  },

full example