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

一种方法是在触发 paste 事件时设置局部变量 isPaste 并将其设置为 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')
    })
}

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

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

Vue / Vuex : paste event triggered before input binded value is updated

vuejs2

vuex