1

我在我的应用程序中使用 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>

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

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

有没有办法解决？也许我在这里犯了某种设计错误。或者也许我应该使用一个挂钩来绑定事件处理程序，或者设置某种标志，表明产品正在加载并且不应该保存产品。

我只是想避免无缘无故地在产品加载后立即保存产品。

4

2 回答 2

2

现在我只是跟踪一个accessoryEventCount在加载产品时初始化为 0 的变量。然后我确保accessoryEventCount > 0在调用saveProductv-selectinput事件之前。

它有效，但我仍然想知道是否有更优雅的解决方案。

更新

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

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

于 2018-04-20T20:31:51.877 回答
0

看起来你应该绑定 prop=onChange，尽管 @input 似乎仍然有效（检查v-select github: line# 544）。

下面是我的解决方案，在加载你的产品之前，绑定 onChange function () {}，加载之后，绑定你喜欢的函数。

Vue.component('v-select', VueSelect.VueSelect)

app = new Vue({
  el: "#app",
  data: {
    accessoryOptions: [
      {'name':'a1', 'sku':'a2'},
      {'name':'b1', 'sku':'b2'},
      {'name':'c1', 'sku':'c2'}
    ],
    product: {
      recommended_accessories: []
    },
    saveProduct: function (){}
  },
  methods: {
    onAccessorySearch: function () {
      console.log('emit input')
    },
    loadProduct: function () {
      this.product.recommended_accessories = ['a1', 'b1'] // simulate get data from the server
      setTimeout( () => {
        this.saveProduct = (value) => {
          console.log('emit input', this.product.recommended_accessories)
        }
      }, 400)
    }
  }
})
#app {
  width: 400px;
}
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<div id="app">
  <button @click="loadProduct()">Click Me!</button>
  <v-select
      multiple
      v-model="product.recommended_accessories"
      label="name"
      :options="accessoryOptions"
      :on-change="saveProduct"
      @search="onAccessorySearch">
          <template slot="option" slot-scope="option">
              <span>{{ option.name }}</span>
              <span>{{ option.sku }}</span>
          </template>
  </v-select>
</div>

于 2018-04-20T22:12:55.453 回答