Bootstrap - vue Флажок, Отметьте дополнительные опции при выборе - PullRequest
Новая
       16

Bootstrap - vue Флажок, Отметьте дополнительные опции при выборе

0 голосов
/ 30 апреля 2020

Что я хочу сделать, так это проверить параметр default, когда пользователь проверяет один из элементов флажка.

Я создал фрагмент ошибки, с которой сталкиваюсь, обычно я думал, что это из-за мои вложенные компоненты.

но я столкнулся с ошибкой Вы можете иметь бесконечное обновление l oop в наблюдателе с выражением "localChecked"

даже в этом простом фрагменте кода .

vue js script 

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/

или есть ли другой способ сделать это, кроме того, что я делаю.

1 Ответ

1 голос
/ 01 мая 2020

Ваше свойство selected является массивом, но вы хотите использовать пары ключ-значение, поэтому вам нужно вместо этого сделать его объектом, который будет хранить массив каждого типа приложения.

Кому убедитесь, что Vue остается реактивным, вам нужно использовать метод Vue.set или this.$set для добавления свойства к объекту, если это свойство DOESN'T уже существует в этом объекте.

$event on b-form-checkbox-group возвращает весь массив выбранных значений, которые нам не нужны. Вот почему я использую модификатор .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>
...