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, например:

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

Затем использовать .includes() метод установки значений по умолчанию здесь, например:

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