javascript - 仅获取选择项vue js的值

Question

我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
        };
      });
    });
  }
};

通过上述代码片段，我最终得到了这个：

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

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

标签： javascriptvue.jsvuejs2vue-component

Answer 1

将您的数据更改为：

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

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