Bootstrap VueJS 表单选择添加组标签答案

【问题标题】：Bootstrap VueJS Form select add Group LabelBootstrap VueJS 表单选择添加组标签
【发布时间】：2021-01-02 23:12:44
【问题描述】：

我有一个串联的两个数组，它显示在 ":options-"ObjOptions"" 上。如何使用此引导程序 VueJS 将“组标签”添加到各个现有数组？

示例，下拉选项应如下所示： --Apple //组标签 ----苹果1 ----苹果2 ----苹果3 ----苹果4 --Banana //组标签 ----香蕉1 ----香蕉2 ----香蕉3 ----香蕉4

<b-form-group>
  <b-form-select id="backdrop-variant" v-model="selected :options="ObjOptions"></b-form-select>
</b-form-group>
export default {

  data() {
      return {
      selected: null,
      ObjOptions:'',
      Array1: ["apple1","apple2","apple3"],
      Array2: ["banana1","banana2","banana3","banana4"],
      };
  },
  created: function (){
      let arr1 = this.Array1;
      let arr2 = this.Array2;
      this.ObjOptions = arr1.concat(arr2);
  },
}

【问题讨论】：

标签： javascript arrays vue.js select bootstrap-vue

【解决方案1】：

可以使用options 数组中的对象来创建组。

该对象需要包含一个label 属性，该属性将显示在组上方，以及一个options 属性，该属性将是组中的每个元素。

在下面的 sn-p 中，我使用了一个计算属性，而不是在 created 挂钩中设置数组，因为如果您的 Array1 或 Array2 数组发生变化，它将更具反应性。

如果您觉得它更适合您的应用程序，当然您仍然可以使用 created 挂钩。

new Vue({
  el: "#app",
  data() {
    return {
      selected: null,
      Array1: ["apple1", "apple2", "apple3"],
      Array2: ["banana1", "banana2", "banana3", "banana4"]
    };
  },
  computed: {
    ObjOptions() {
      const { Array1, Array2 } = this;

      return [
        {
          label: 'Apple',
          options: Array1
        },
        {
          label: 'Banana',
          options: Array2
        }
      ]
    }
  }
});

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-select v-model="selected" :options="ObjOptions"></b-select>
</div>

【讨论】：