Bootstrap-vue 复选框，选中时检查附加选项

Posted 2023-02-22

【中文标题】Bootstrap-vue 复选框，选中时检查附加选项

【英文标题】：Bootstrap-vue Checkbox, Check additional options when selected

【发布时间】：2020-08-14 09:02:23

【问题描述】：

当用户选中其中一个复选框时，我还要做的是检查default 选项。

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

但我遇到了错误 您可能在 watcher 中有一个无限更新循环，表达式为“localChecked”

即使在这个简单的代码 sn-p 上。

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>

小提琴：

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

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

【问题讨论】：

你想要的是这样的 (jsfiddle.net/6kvew3zf/1) 吗？

@Hiws 这就是我想要的。是的，您应该将此添加为答案，以便我接受。感谢您在代码中添加 cmets。

【参考方案1】：

您的selected 属性是一个数组，但您想使用键值对，这就是为什么您需要将其设为对象，该对象将存储每个应用程序类型的数组。

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

b-form-checkbox-group 上的 $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>