chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue

<template>
<div class="vue-component">
  
   <h2><a name="section-50"></a>{{ $t('resources.title')}}</h2>
   
   <div>
      <label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>
   </div>
   
   <table class="table table-bordered table-striped border-dark align-middle" v-if="resources.length > 0">
      <thead>
         <tr>
            <th class="chill-orange">{{ $t('resources.text') }}</th>
            <th class="chill-orange">{{ $t('resources.description') }}</th>
            <th class="chill-orange">{{ $t('action.actions') }}</th>
         </tr>
      </thead>
   </table>
   <div class="flex-table mb-3">
      <resource-item
         v-for="resource in resources"
         v-bind:resource="resource"
         v-bind:key="resource.id"
         @remove="removeResource">
      </resource-item>
   </div>
   <div>
      <add-persons 
        buttonTitle="resources.add_resources"
        modalTitle="resources.add_resources"
        v-bind:key="addPersons.key"
        v-bind:options="addPersons.options"
        @addNewPersons="addNewPersons"
        ref="addPersons"> <!-- to cast child method -->
      </add-persons>
   </div>

</div>
</template>

<script>
import { mapState } from 'vuex';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import ResourceItem from './Resources/ResourceItem.vue';

export default {
   name: 'Resources',
   components: {
      AddPersons,
      ResourceItem
   },
   data() {
      return {
         addPersons: {
            key: 'resources',
            options: {
               type: ['person', 'thirdparty'],
               priority: null,
               uniq: false,
            }
         }
      }
   },
   computed: mapState({
      resources: state => state.accompanyingCourse.resources,
      counter: state => state.accompanyingCourse.resources.length
   }),
   methods: {
      removeResource(item) {
         console.log('@@ CLICK remove resource: item', item);
         this.$store.dispatch('removeResource', item);
      },
      addNewPersons({ selected, modal }) {
         console.log('@@@ CLICK button addNewPersons', selected);
         selected.forEach(function(item) {
               this.$store.dispatch('addResource', item);
            }, this
         );
         this.$refs.addPersons.resetSearch(); // to cast child method
         modal.showModal = false;
      }
   }
}
</script>