在vuejs组件中的多选中获取所选项目

Question

在我的组件中，我有多重选择，应该根据传递的匹配值选择选项：

<select class="custom-select" multiple="" v-model="items">
          <option v-for="item in objects_list" :selected="itemSelected(item)" :key="item.id" :value="item.id">
              {{item.name}}
          </option>
        </select>

...

methods() {
  itemSelected(item) {
      let selected;
      let object_selected = this.value.filter(object => {
        console.log(object)
        if(item.id == object) {
          return true;
        }
      });
    }

所选绑定似乎不起作用，如何正确实现多选以绑定所选选项？

Answer 1

最好的方法是使用 Vue.js

中的 CREATED 函数

<template>
  <div>
    <select class="ur-CSS-class" multiple v-model="selected">
      <option v-for="item in objects_list" :key="item.id" :value="item.id">
        {{ item.name }}
      </option>
    </select>
    <br />
    <span>Selected : {{ selected }}</span>
  </div>
</template>

<script>
var your_list = [
  { name: "one", id: 13 },
  { name: "two", id: 18 },
  { name: "three", id: 11 },
  { name: "four", id: 7 },
  { name: "five", id: 1 },
  { name: "six", id: 2 },
];

export default {
  name: "App",
  data() {
    return {
      objects_list: your_list,
      selected: []
    };
  },
  props:{
   inputData: {
       type: Object,
       required: true
    }
  },
  computed: {
      selected() {
        let selected = this.objects_list.filter(item => {
              return this.inputData.find(i => i == item.id);
           });
        return selected;
    }
  }
};
</script>

在vuejs组件中的多选中获取所选项目

get selected item in multiselect in vuejs component

binding

multi-select

vue.js