加载已经在表单中注册的数据 - VueJS - Bootstrap-Vue

Question

我有一个表单，有select链接，就是当一个select填入时，另一个select也会填入另一个select的相应代码。问题是当打开该字段的值的模态时，没有加载该值，不知道是不是v模型不同的原因。

模板

<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-model "中包含的值，但这不会发生在 "dataSelect "中，这是代码中的第一个和第二个选择。

然而，如果我尝试添加一个新的表单，一切都能正常工作，甚至当我进行第一个选择时，第二个选择会自动填充。

我认为问题的发生是因为前两个选择，是用与下面其他两个不同的v-model做的，因为下面两个当我尝试打开表单时，它们是用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>

Answer 1

Dataselect没有被更新。你可以在你的loadUniqueData函数中更新它。

loadUniqueData(dataUnique) { 
    this.dataUnique = { ...dataUnique } 
    this.dataSelect = { ...dataUnique.dataSelect } 
}