У меня есть форма с привязкой выбора, то есть, когда один выбор заполнен, другой выбор также заполняется соответствующим кодом другого выбора. Проблема в том, что при открытии модального значения со значением этого поля оно не загружает значение, я не знаю, в чем причина - v-модель, которая отличается.
Template
<template>
<div class="Datas">
<b-row class="mt-0 mb-0">
<b-col align="left" md="3" sm="12">
<b-button variant="primary" @click="viewModal()" class="mr-2" size="sm">
<span> New</span>
</b-button>
</b-col>
</b-row>
<b-table hover striped small outlined :items="valuesLoaded" :sort-by.sync="sortBy" :fields="fields" responsive="sm" class="mt-0 mb-0" id="table-A">
<template slot="actions" slot-scope="data">
<b-button @click="viewModal(data.item)" variant="primary" class="mr-2" size="sm">
<span> Edit</span>
</b-button>
</template>
</b-table>
<div>
<b-modal ref="viewModal"
title="Add/Edit Form"
size="lg"
@hidden="reset"
@ok="save"
ok-variant="primary"
cancel-title="Cancel">
<div>
<input id="dataUnique-id" type="hidden" v-model="dataUnique.id"/>
<b-row class="mt-0 mb-0">
<b-col md="6" sm="12">
<b-form-group label="Value 1:" label-for="dataUnique-value1" label-size="sm" class="mt-0 mb-0">
<b-form-select
v-model="dataSelect"
size="sm">
<option :key="obj.value2" v-for="obj in informations" v-bind:value="obj">{{ obj.value1 }}</option>
</b-form-select>
</b-form-group>
</b-col>
<b-col md="6" sm="12">
<b-form-group label="Value 2:" label-for="dataUnique-value2" label-size="sm" class="mt-0 mb-0">
<b-form-select
v-model="dataSelect"
size="sm">
<option :key="obj.value2" v-for="obj in informations" v-bind:value="obj">{{ obj.value2 }}</option>
</b-form-select>
</b-form-group>
</b-col>
<b-col md="6" sm="12">
<b-form-group label="Base:" label-for="dataUnique-base" label-size="sm" class="mt-0 mb-0">
<b-form-select v-model="dataUnique.base"
:options="optionBase"
size="sm" />
</b-form-group>
</b-col>
<b-col md="6" sm="12">
<b-form-group label="Rulez:" label-for="dataUnique-rulez" label-size="sm" class="mt-0 mb-0">
<b-form-select v-model="dataUnique.rulez"
:options="optionRulez"
size="sm" />
</b-form-group>
</b-col>
</b-row>
</div>
</b-modal>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Test',
components: { },
data: function() {
return {
dataUnique: {},
dataBackend: [],
optionBase: [
{ value: 'base1', text: 'Base 1' },
{ value: 'base2', text: 'Base 2' },
{ value: 'base3', text: 'Base 3' },
{ value: 'base4', text: 'Base 4' },
{ value: 'base5', text: 'Base 5' },
],
optionRulez: [
{ value: 'rulez1', text: 'Rulez 1' },
{ value: 'rulez2', text: 'Rulez 2' },
{ value: 'rulez3', text: 'Rulez 3' },
],
informations: [],
fields: [
{ key: 'value1', label: 'Value 1', sortable: true },
{ key: 'value2', label: 'Value 2', sortable: true },
{ key: 'actions', label: 'Actions' }
],
dataSelect: {
value1: '',
value2: ''
}
}
},
methods: {
viewModal (dataUnique) {
if(dataUnique != null) {
const edition = {
dataSelect: {
value2: dataUnique.value2
},
...dataUnique
}
this.loadUniqueData(edition)
} else {
this.dataUnique = {}
}
this.$refs.viewModal.show()
},
loadData() {
const url = `${baseApiUrl}/dataBackend`
axios.get(url).then(res => {
this.dataBackend = res.data.data
})
.catch(showError)
},
loadInformations() {
const url = `${baseApiUrl}/informations`
axios.get(url).then(res => {
this.informations = res.data
})
},
loadUniqueData(dataUnique) {
this.dataUnique = { ...dataUnique }
}
},
mounted() {
this.loadData()
this.loadInformations()
}
}
</script>
<style>
</style>
Когда я нажимаю кнопку «Редактировать», которая находится в таблице «Действие», она должна быть загружена в «модальное», которое открывается, значения, содержащиеся в каждом " v-модель ", но это не происходит в" dataSelect ", который является первым и вторым выбором в коде.
Однако, если я пытаюсь добавить новую форму, все работает правильно, даже когда я делаю первый выбор, второй выбор автоматически заполняется.
Я думаю, что проблема возникает из-за того, что первые два выбора сделаны с v-моделью, отличной от двух других ниже, так как два ниже, когда Я пытаюсь открыть форму, они заполнены значениями объекта dataUnique. Это правильный ожидаемый результат.
<b-form-select
v-model="dataSelect"
size="sm">
<option :key="obj.value2" v-for="obj in informations" v-bind:value="obj">{{ obj.value1 }}</option>
</b-form-select>