时间戳

首页 > 解决方案 > VueJs 从数据库中选择默认值

javascript - VueJs 从数据库中选择默认值

问题描述

我正在使用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

在此处输入图像描述

标签： javascriptvue.jselement-ui

解决方案

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

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

然后使用.includes()方法在此处设置默认值，例如：

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

推荐阅读