时间戳

首页 > 解决方案 > 通过 Vuetify 组合框中的 @change 传递目标元素

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

问题描述

我需要通过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方法期间添加的类。

标签： javascriptvue.jsvuejs2vuetify.js

解决方案

我建议使用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'
    }
  },

完整的例子

推荐阅读