Question

我的格式如下：

这是编辑表单。

如您所见，我有多项选择。我需要将服务器中的值绑定到select。这是服务器中对象的结构。 1）多个选择的所有元素：

2）我想看到选中的特定对象。如您所见，还有一个名为“枢轴”的附加字段。

因此，我打开表单时希望看到以下内容：

我已经尝试过类似的方法，但是没有成功：

<div class="form-group">
<label for="bk">Связанные бк</label>
<select class="form-control form-control-sm" id="bk" v-model="formFields.applicationBk" multiple>
    <option v-for="bk in allBk" v-if="applicationBk.find(x => x.id === bk.id) 'selected'" >
        {{ bk.name }}
    </option>
</select>

这是完整的js代码：

<script>
import { EventBus } from '../../app';

export default {
    name: "ApplicationEdit",
    props: ['applicationId', 'name', 'offer', 'bundleId', 'isBlackMode', 'applicationBk', 'allBk'],
    mounted: function(){
        console.log(this.applicationBk)

    },
    methods:{
        submit: function (e) {
            window.axios.post('/application/edit/' + this.applicationId, this.formFields)
                .then(res => {
                    console.log('Сохранил!');
                    $('#applicationEdit' + this.applicationId).modal('hide');

                    EventBus.$emit('reloadApplicationsTable');
                }).catch(err => {
                if(err.response.status === 422){
                    this.errors = err.response.data.errors || [];
                }
                //console.error('Ошибка сохранения приложения. Описание: ');
                console.error(err)
            });
        }
    },
    data(){
        return {
            formFields: {
                applicationId: this.applicationId,
                applicationBk: this.applicationBk,
                name: this.name,
                offer: this.offer,
                bundle_id: this.bundleId,
                giraffe: this.isBlackMode,
                bk: this.applicationBk,
            },
            errors: []
        }
    }
}

Answer 1

您可以考虑像使用循环一样使用循环，但是对选定值的数组使用v模型。这是vue的示例：https://vuejs.org/v2/guide/forms.html#Select

在编辑表单上选择多项

1 个答案: