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