Javascript 如何使用vue select区分用户输入和数据更改

我在我的应用程序中使用vue select，并试图防止在首次将默认值加载到vue select输入时触发事件处理程序

该组件如下所示：

<v-select
    multiple
    v-model="product.recommended_accessories"
    label="name"
    :options="accessoryOptions"
    @input="saveProduct"
    @search="onAccessorySearch">
        <template slot="option" slot-scope="option">
            <h4>{{ option.name }}</h4>
            <h5>{{ option.sku }}</h5>
        </template>
</v-select>

如您所见，我希望在用户更改此multi-select中的值时保存产品。它工作正常，但有一个问题

选择的值与产品相关。推荐的附件数据。在应用程序的其他地方，从服务器加载一个产品，其中包括一个推荐的附件属性。加载产品后会触发调用saveProduct，因为vue select为输入设置了预选选项，这显然会触发@input事件

这有什么关系吗？也许我在这里犯了一些设计错误。或者我应该使用一个钩子来绑定事件处理程序，或者设置某种标志，指示产品正在加载过程中，并且不应该保存产品

---

我只是试图避免在加载产品后立即无理由地保存该产品。

目前，我只是跟踪一个accessoryEventCount变量，该变量在加载产品时初始化为0。然后，在对v-select输入事件调用saveProduct之前，确保accessoryEventCount>0

这是可行的，但我仍然想知道是否有更优雅的解决方案

更新

看起来Vue.nextTick就是我要找的。在代码中设置product的值之前，我设置了一个标志this.isSettingProduct=true。然后我设置产品，并调用Vue.nextTick=>{this.isSettingProduct=false}

---

现在，如果this.isSettingProduct==true，我可以避免保存产品。使用Vue.nextTick可确保在异步数据更新完成之前，该标志不会被设置回false。

看起来您应该绑定prop=onChange，尽管@input似乎仍在运行检查

下面是我的解决方案，在加载产品之前，用函数{}绑定onChange，加载之后，用您喜欢的函数绑定它

Vue.component'v-select'，VueSelect.VueSelect app=新Vue{ el:应用程序， 数据：{ 附件选项：[ {'name'：'a1'，'sku'：'a2'}， {'name'：'b1'，'sku'：'b2'}， {'name'：'c1'，'sku'：'c2'} ], 产品：{ 推荐配件：[] }, saveProduct:函数{} }, 方法：{ onAccessorySearch：函数{ console.log'emit input' }, loadProduct：函数{ this.product.recommended_accessories=['a1'，'b1']//模拟从服务器获取数据 设置超时=>{ this.saveProduct=value=>{ console.log'emit input'，this.product.recommended_附件 } }, 400 } } } 应用程序{ 宽度：400px； } 点击我！ {{option.name} {{option.sku}