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事件时，您可以执行此操作的一种方法是使用局部变量true并将其设置为paste。然后还注册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：在更新输入绑定值之前触发粘贴事件

2 个答案: