使用 v-model 将相同的对象加载到两个 b-form-select - VueJS(bootstrap-vue)答案

【问题标题】：Load the same object into two b-form-select using the v-model - VueJS(bootstrap-vue)使用 v-model 将相同的对象加载到两个 b-form-select - VueJS(bootstrap-vue)
【发布时间】：2020-12-04 17:05:53
【问题描述】：

我需要在几个选择中加载，在我的对象“objectSelected”中加载的值，但是它没有在 bootstrap-vue 表单中加载。

它没有显示任何错误，只是没有加载。

//My selectors:
<b-col md="3" sm="12">
    <b-form-group label-for="object-myvalue" label-size="sm" class="mt-0 mb-0">
        <b-form-select 
            v-model="objectSelected"
            readonly
            disabled
            size="sm">
            <option :key="obj.code" v-for="obj in myArrayObjects" v-bind:value="obj">{{ obj.myvalue }}</option>
        </b-form-select>
    </b-form-group>
</b-col>
<b-col md="3" sm="12">
    <b-form-group label-for="object-description" label-size="sm" class="mt-0 mb-0">
        <b-form-select 
            v-model="objectSelected"
            readonly
            disabled
            size="sm">
            <option :key="obj.code" v-for="obj in myArrayObjects" v-bind:value="obj">{{ obj.description }}</option>
        </b-form-select>
    </b-form-group>
</b-col>

//My Data - return:
data: function() {
    return {
        objectSelected: {
            description: '',
            code: '',
            myvalue: '',
        },
        myArrayObjects: [],
    }
}

//Method that loads the value in the select:
loadValue() {
    this.objectSelected.code = 11
}

我的方法“loadValue”打开模态以使用objectSelected，打开后很好，简单的不在v-models中加载itens对象。

利用其他对象的其他v-model，打开完美。

我使用 bootstrap-vue 版本：“bootstrap-vue”：“2.0.0-rc.13”，

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

<b-form-select> 具有 options 属性，您可以将其与您的选项数组绑定，例如：

<template>
...
  <b-form-select
    v-model="selectedItem"
    :options="myOptions"
  />
...
</template>

<script>
...
  data:()=>({
    selectedItem: null,
    myOptions:[
      {value:"", text:""}, // this will set the selectedItem with string
      {value:{}, text:""}, // this with object
    ]
  })
...
</script>

【讨论】：