VueJs 从数据库中选择默认值

Question

我正在使用el-select，但我无法在编辑页面中选择默认值。

它选择相同数量的数据但错误的细节。让我们通过这张图片告诉你：

所以我的这个数据有 2 个值，但值是 core 17 和 core 19 但在这里你看到我得到 core 1 和 core 1 所以我得到了正确的数量但错误的数据。

代码

template

<el-row :gutter="10">
    <el-col :span="24">
        <el-form-item  label="Cores">
            <el-select style="width: 100%;" filterable multiple clearable v-model="form.cores" placeholder="Select Cores">
                <el-option
                    v-for="core in cores"
                    :key="core.id"
                    :label="core.name"
                    :selected="core.id === form.cores.id"
                    :value="core.id">
                </el-option>
            </el-select>
        </el-form-item>
    </el-col>
</el-row>

script

我把每一个部分都评论了，你不要糊涂

data() {
    return {
        cores: [], // core 1 till core 20
        form: {
            name: '',
            position: '',
            link_id: '',
            cable_id: '',
            cores: [], // core 17 and core 19
            description: '',
            longitude: '',
            latitude: '',
            _method: 'PUT',
        },
    }
},
methods: {
    fetchRegion() {
        axios
            .get('/api/admin/closures/'+this.$route.params.id, {
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('access_token')
                }
            })
            .then(response => {
                // removed the rest to make it clean.
                this.form.cores = response.data.data.cores; // this return my default (stored data) core 17, core 19
                this.cores = response.data.cores; // this return all cores from 1 to 20 including 17 and 19 in order if user wants to add more etc.
            })
            .catch(function (error) {
                console.log('error', error);
            });
    },
}

知道如何选择正确的值吗？

更新

this.form.cores 的控制台结果

Answer 1

您可以先使用.map() 方法从form.cores 数组中仅获取选定的ID，例如：

form.cores.map(x=>x.id)   // returns [17, 19]

然后使用.includes()方法在这里设置默认值，如：

:selected="form.cores.map(x=>x.id).includes(core.id)"