仅获取选择项vue js的值答案

【问题标题】：Get values only of select item vue js仅获取选择项vue js的值
【发布时间】：2019-12-06 03:28:58
【问题描述】：

我在我的应用程序中使用vue-multi-select 包进行多选。它以以下形式存储和发送选定的数据：

[{name: volvo},{name: saab}, ...]

或者用 HTML 的简单术语来说：

<select name="name" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

将所选项目的文本作为值发送。但是我们为什么要 text 呢？我们需要这样的选定项目的 ID：

<select name="name" multiple>
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Opel</option>
  <option value="4">Audi</option>
</select>

并获取如下格式的数据：

[{name: 1},{name: 2}, ...]

为了得到我想要的结果，我尝试了这个：

 <vue-multi-select
      v-model="form.includeds_id"
      search
      historyButton
      :btnLabel="btnLabel"
      :filters="filters"
      :options="options"
      :selectOptions="includeds"
  />

import vueMultiSelect from "vue-multi-select";
import "vue-multi-select/dist/lib/vue-multi-select.css";
export default {
  data() {
    return {
      options: {
        multi: true,
        groups: false,
        cssSelected: option =>
          option.selected ? {
            "background-color": "#3f51b5"
          } : ""
      },
      filters: [{
        nameAll: "Select all",
        nameNotAll: "Deselect all",
        func() {
          return true;
        }
      }],
      includeds: [{
        id: "",
        name: ""
      }],
      form: new Form({
        id: "",
        title: "",
        includeds_id: []
      })
    };
  },
  components: {
    vueMultiSelect
  },
  created() {
    axios.get("api/includeds").then(response => {
      this.includeds = response.data.map((obj, index) => {
        return {
          name: obj.name
        };
      });
    });
  }
};
export default {
  data() {
    return {
      options: {
        multi: true,
        groups: false,
        cssSelected: option =>
          option.selected ? {
            "background-color": "#3f51b5"
          } : ""
      },
      filters: [{
        nameAll: "Select all",
        nameNotAll: "Deselect all",
        func() {
          return true;
        }
      }],
      includeds: [{
        id: "",
        name: ""
      }],
      form: new Form({
        id: "",
        title: "",
        includeds_id: []
      })
    };
  },
  components: {
    vueMultiSelect
  },
  created() {
    axios.get("api/includeds").then(response => {
      this.includeds = response.data.map((obj, index) => {
        return {
          id: obj.id,
          name: obj.name
        };
      });
    });
  }
};

使用上述代码 sn-p 我最终得到了这个：

如果我删除name:obj.name。我获得了所选项目所需的 ID，但在选择选项中看不到文本。

有什么方法可以在选择选项中显示文本并获取所选项目的 ID 数组？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

将您的数据更改为：

data = [
  {name: '1'},
  {name: '2'},
  {name: '3'},
  {name: '4'},
  {name: '5'},
]

然后添加 labelName 属性以获取用户友好的标签。

【讨论】：