Vue / Vuex :在更新输入绑定值之前触发的粘贴事件

Question

我在组件中有一个简单的形式：

<form v-on:submit.prevent="submitSearch">
    <input v-model="objId" @paste="submitSearch">
    <button>Submit</button>
</form>

和

var searchForm = {
    methods :   {
        submitSearch() { 
            store.dispatch('submitSearch')
        }
    },
    computed : {
      objId: {
        get () {
          return ...
        },
        set (id) {
          store.commit('objId', id)
        }
      }
    },
    ...
};

它在键入和提交时效果很好，但是当粘贴值时submitSearch会在更新之前调用objId因此不会。有没有一种简洁且 vue 友好的方法来处理这个问题？

Answer 1

一种方法

是isPaste一个局部变量，并在触发paste事件时将其设置为 true。然后还要注册一个input事件，该事件将在paste事件之后触发，并检查isPaste是否true。如果是，则提交并将isPaste设置为再次false。

<input v-model="objId" @paste="paste" @input="input">

data(): {
  return {
    isPaste: false
  }
},
methods: {
  paste() {
    this.isPaste = true;
  },
  input() {
    if (this.isPaste) {
      store.dispatch('submitSearch');
      isPaste = false;
    }
  }
}

Answer 2

使用 nextTick() 解决了它：

submitSearch() { 
    Vue.nextTick().then(function () {
        store.dispatch('submitSearch')
    })
}

不确定这是否是推荐的方法，但它运行良好并避免了额外的变量。