通过 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

Answer 2

使用e.target 更改输入。

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);
                    console.log(e.target);
                    e.target.parentElement.classList.remove('saving');
                });
            });
        },

这只适用于简单的组件。我错了。

您可以尝试的另一种方法是使用相同的index 设置Array，并且当您触发comboActive(item, i) 和updateTags(item, i) 时将此数组切换为true || false

comboActive(i, event) {
    console.log('active ', event)
    this.isActive[i] = true;
},

updateTags(item, i) {
    this.$nextTick(() => {
        this.$nextTick(() => {
            this.isActive[i] = false;
        });
    });
},