Vue-Multiselect Remove事件如何获取值和ID

时间:2019-05-10 18:00:09

标签: vue.js vue-multiselect

我是VueJ的新手,我正在使用vue-multiselect,需要获取已删除的商品信息。

例如:在选择一个或多个itens后,通过单击标签将其删除,我如何使用@remove event并获取我需要的所有信息,例如value和id?

假设我有一个像这样的数组:$group = $user->groups()->where('group_id', $groupId)->firstOrFail(); $this->authorize('update', $group->pivot); // or ... foreach ($user->groups as $group) { $this->authorize('update', $group->pivot); }

如果将这些值从vuejs-multiselect中删除,如何访问这些值?

我写:

['food', 'farmacy']

我只是将值和id作为参数传递给 <multiselect v-model="value" track-by="code" :options="options" :multiple="true" :taggable="true" placeholder="Choose one category" label="name" @remove="toggleUnSelectMarket(value, id)"></multiselect> 函数,但不知道如何找到我需要的信息:

toggleUnSelectLojas

1 个答案:

答案 0 :(得分:1)

签出此Sandbox

您无需在删除时传递任何参数,只要事件包含About对象即可。您所能做的是:

<template>
  <div id="app">
    <vue-multiselect
      v-bind:options="list"
      v-model="value"
      multiple
      label="id"
      track-by="id"
      @remove="toggleUnSelectMarket"
    ></vue-multiselect>
  </div>
</template>

<script>
import vueMultiselect from "vue-multiselect";

export default {
  components: {
    vueMultiselect
  },
  methods: {
    toggleUnSelectMarket({ value, id }) {
      this.toggleUnSelectLojas(value, id);
    },
    toggleUnSelectLojas(value, id) {
      console.log(" Teste toggleUnSelectLojas value : ", value);
      console.log(" Teste toggleUnSelectLojas id : ", id);
    }
  },
  data() {
    return {
      value: [],
      list: [
        {
          id: "1",
          value: 2
        },
        {
          id: "2",
          value: 3
        }
      ]
    };
  }
};
</script>