Bootstrap-vue Checkbox，选中时勾选附加选项

Question

我还想在用户选中其中一个复选框时选中 default 选项。

我已经创建了我遇到的错误的片段，通常我认为这是因为我的嵌套组件。

但是我遇到了错误 您可能在带有表达式“localChecked”的观察器中有一个无限更新循环

即使是这个简单的代码片段。

vue js 脚本

new Vue({
  el: "#app",
  data: {
    application: [
            {
        app_name : 'Netflix',
        app_default : 'videoshare_default',
        options : [
          { text : 'Video Stream', value : 'video_streaming'},
          { text : 'Download Video' , value : 'video_download'},
          { text : 'Share Video' , value : 'videoshare_default'}
        ]
      },
            {
        app_name : 'Messenger',
        app_default : 'message',
        options : [
            { text : 'Messaging', value : 'message'},
          { text : 'Voice Calls' , value : 'voice_calls'},
          { text : 'Video Calls' , value : 'video_calls'},
          { text : 'Media Sharing' , value : 'file_transfer'}
        ]
      }      
    ],
    selected : []
  },
  methods: {
    selectDefault: function(data,$event){
        this.selected[data.app_name].push(data.videoshare_default)
    }
  }
})

HTML

<div id="app">
  <b-col v-for="(data , index) in application" v-bind:key="index" class="p-2" cols="5">
    <b-form-group :label="data.app_name" label-class="font-weight-bold">
      <b-form-checkbox-group                            
         @input="selectDefault(data,$event)"
         v-model="selected[data.app_name]"
         :options="data.options"
         name="application[]"
         stacked
      ></b-form-checkbox-group>
    </b-form-group>
  </b-col>
</div>

一个FIDDLE:

https://jsfiddle.net/tomexsans/194m0jdq/1/

或者除了我正在做的，还有其他方法可以做到这一点。

Answer 1

你的selected属性是一个数组，但是你想使用键值对，这就是为什么你需要把它变成一个对象，它会存储每个应用程序类型的数组.

为了确保 Vue 保持响应式，您需要使用 Vue.set 或 this.$set 方法向对象添加属性，如果属性不已经存在于该对象中。

b-form-checkbox-group returns 上的 $event 整个选定值数组，这是我们不想要的。这就是我在事件上使用 .native 修饰符的原因，这样我就可以访问单击的复选框及其值。

new Vue({
  el: "#app",
  data: {
    application: [{
        app_name: 'Netflix',
        app_default: 'videoshare_default',
        options: [{
            text: 'Video Stream',
            value: 'video_streaming'
          },
          {
            text: 'Download Video',
            value: 'video_download'
          },
          {
            text: 'Share Video',
            value: 'videoshare_default'
          }
        ]
      },
      {
        app_name: 'Messenger',
        app_default: 'message',
        options: [{
            text: 'Messaging',
            value: 'message'
          },
          {
            text: 'Voice Calls',
            value: 'voice_calls'
          },
          {
            text: 'Video Calls',
            value: 'video_calls'
          },
          {
            text: 'Media Sharing',
            value: 'file_transfer'
          }
        ]
      }
    ],
    selected: {}
  },
  methods: {
    selectDefault(data, event) {
      /*  Return if the checkbox was unchecked */
      if (!event.target.checked) return;
      /* Return if the selected value was the default */
      if (data.app_default === event.target.value) return;

      /* Init the array if it doesn't exist yet.*/
      if (!this.selected[data.app_name]) {
        this.$set(this.selected, data.app_name, []);
      }

      const nestedSelected = this.selected[data.app_name];
      /* Push in the default value if it doesn't exist alreayd */
      if (!nestedSelected.find(value => value === data.app_default)) {
        this.selected[data.app_name].push(data.app_default)
      }
    }
  }
})

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

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

<div id="app">
  <b-col v-for="(data , index) in application" v-bind:key="index" class="p-2" cols="5">
    <b-form-group :label="data.app_name" label-class="font-weight-bold">
      <b-form-checkbox-group
         v-model="selected[data.app_name]"
         @input.native="selectDefault(data, $event)"
         :options="data.options"
         name="application[]"
         stacked
       ></b-form-checkbox-group>
    </b-form-group>
  </b-col>
  
  {{ selected }}
</div>

Bootstrap-vue Checkbox，选中时勾选附加选项

Bootstrap-vue Checkbox, Check additional options when selected

vue.js

vue-component

bootstrap-vue

vue js 脚本

HTML