如何从vue-multiselect插件中的选定选项创建id数组？

Question

我创建了一个Laravel应用程序。现在，我可以成功地检索对象格式的数据，并可以在选择时以vue-multiselect (https://vue-multiselect.js.org/)显示名称。此外，我还可以将选定的选项以对象格式保存到数据库中。我的问题是如何只将id's保存在数组中？

这是api的结果：

[
  {
    "id": 1,
    "name": "Shoe Machine Operators",
    "description": "Iusto cupiditate quo veniam.",
    "created_at": "2022-03-23T10:23:35.000000Z",
    "updated_at": "2022-03-23T10:23:35.000000Z"
  },
  {
    "id": 2,
    "name": "Librarian",
    "description": "Vero eius quidem quo fugiat.",
    "created_at": "2022-03-23T10:23:35.000000Z",
    "updated_at": "2022-03-23T10:23:35.000000Z"
  }
]

下面是我的vue-multiselect元素所在的标记代码：

<form @submit.prevent="addEmployee">
    <div class="flex space-x-6 md:w-3/4">
        <div class="md:w-3/6 mb-4 flex-1">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">First Name</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline required" name="name" id="name" type="text" placeholder="First Name" tabindex="1" v-model="employee.first_name" />
        </div>
        <div class="md:w-3/6 mb-4 flex-1">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Last Name</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline required" name="name" id="name" type="text" placeholder="Last Name" tabindex="2" v-model="employee.last_name" />
        </div>
    </div>
    <div class="flex space-x-6 md:w-3/4">
        <div class="md:w-3/6 mb-4 flex-1">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="designation_id">Designation</label>
            <multiselect v-model="employee.designation_id" 
                :options="designation_options" 
                :multiple="true" 
                :close-on-select="false" 
                :clear-on-select="false" 
                :preserve-search="true" 
                placeholder="Pick one or many" 
                label="name" 
                track-by="name" 
                :preselect-first="true"
                >
                <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
            </multiselect>
            <pre class="language-json"><code>{{ employee.designation_id }}</code></pre>
        </div>
        <div class="md:w-3/6 mb-4 flex-1">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="position_id">Position</label>
            <multiselect v-model="employee.position_id" 
                :options="position_options" 
                :multiple="true" 
                :close-on-select="false" 
                :clear-on-select="false" 
                :preserve-search="true" 
                placeholder="Pick one or many" 
                label="name" 
                track-by="name" 
                :preselect-first="true"
                >
                <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
            </multiselect>
            <pre class="language-json"><code>{{ employee.position_id }}</code></pre>
        </div>
    </div>
    <div class="flex space-x-6 md:w-3/4">
        <div class="md:w-3/6 mb-4 flex-1">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="basic_pay">Basic Pay</label>
            <div class="relative rounded">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <span class="text-gray-700">₱</span>
                </div>
                <input class="shadow appearance-none border rounded w-full py-2 pl-8 pr-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline required" name="basic_pay" id="basic_pay" type="number" step="any"  placeholder="00.00" tabindex="5" v-model="employee.basic_pay" />
                <div class="absolute inset-y-0 right-0 flex items-center"><label for="basic_pay" class="sr-only">Basic Pay</label>
                </div>
            </div>
        </div>
        <div class="md:w-3/6 mb-4 flex-1">&nbsp;</div>
    </div>
    <button type="submit" class="sm:hidden md:flex bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded outline-none focus:outline-none">Create</button>
</form>

这是我的剧本：

<script>
    export default {
        data() {
            return {
                employee: {},
                designation_id: [],
                designation_options: [],
            }
        },
        methods: {
            addEmployee() {
                this.axios.post('/api/employees', this.employee).then(response => (this.$router.push({
                    name: 'employees'
                }))).catch(err => console.log(err)).finally(() => this.loading = false)
            },
            getDesignationNames() {
                this.axios.get('/api/designation').then((res) => {
                    this.designation_options = res.data;
                }).catch(err => console.log(err))
            },
        },
        created: function() {
            this.getDesignationNames();
        },
    } 
</script>

任何帮助都是非常感谢的。

我尝试使用.map()函数只获取id，但它导致vue-multiselect不显示名称，只返回id格式的第一个单击结果。

getDesignationNames() {
    this.axios.get('/api/designation').then((res) => {
        this.designation_options = res.data.map((a) => {
            return a.id;
        });
    }).catch(err => console.log(err))
},

Answer 1

使用v型。将v模型绑定定义为数组。

检查此示例

<script setup>
import { ref } from 'vue'
const data = ref([{id:1,name:"first"},{id:2,name:"second"},{id:3,name:"third"},{id:4,name:"forth"},{id:5,name:"fifth"}])
const selected = ref(["2","4"])
</script>
<template>
  <select v-model="selected" multiple>
    <option v-for="item in data" :value="item.id">{{item.name}}</option>
  </select>
  <div>Selected: {{selected}}</div>
</template>