VueJs select 来自数据库的默认值

Question

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

它select数据量相同但细节错误。这张图告诉你：

So this data of mine has 2 value but the values are core 17 and core 19 but here as you see i get core 1 and core 1 so i get the right amount but wrong data.

代码

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

I commented every part to you don't get confused

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

知道如何 select 正确的值吗？

更新

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)"

VueJs select 来自数据库的默认值

VueJs select default values from database

javascript

vue.js

element-ui

代码

更新