componente padre index.vue con notice hijo

index.vue

<template>
  <div>
    <card>
              <span slot="tools">
                 <a href="#dlgNewNotice" class="btn btn-icon-toggle" data-toggle="modal">
                    <i class="fa fa-plus-square"></i>
                </a>
              </span>
              <span slot="title">Avisos</span>

              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" :class="{active: country.label === 1}" v-for="country in countries">
                  <a :href="'#' + country.label" :aria-controls="'#' + country.label" role="tab" data-toggle="tab" >{{ country.value }}</a>
                </li>
              </ul>
            <br>
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane" :class="{active: country.label === 1}" :id="country.label"
                   v-for="country in countries" :key="country.label">
                  <country-notices :country_id="country.label"></country-notices>
              </div>
            </div>
    </card>
  </div>

</template>

<script>
  import CountryNotices from './notices';
  import Country from "../../../models/security/country/Country";

export default {
  components: {CountryNotices},

  data(){
    return {
      countries: []
    }
  },

  created() {
    this.index();
  },

  methods: {
    index() {
      Country.pluck({}, data => this.countries = data);
    }
  }
}
</script>

notice.vue componente hijo

<template>
    <div>
      <div class="row">
            <div class="table-responsive">
                  <table class="table table-bordered table-striped table-condensed">
                    <thead>
                    <tr>
                      <th>Titulo de Aviso</th>
                      <th>Empresa</th>
                      <th>Fecha Publicacion</th>
                      <th>Fecha Registro</th>
                      <th>Descripcion</th>

                      <th width="10%"></th>
                    </tr>
                    </thead>
                    <tbody>
                          <tr v-for="notice in notices_list" :key="notice.id">
                            <td>{{ notice.title }}</td>
                            <td><span v-for="companie in notice.companies">{{ companie.name }}, </span></td>
                            <td>{{ notice.date_published }}</td>
                            <td>{{ notice.created_at }}</td>
                            <td>{{ notice.description }}</td>
                            <td class="text-center">
                              <a href="" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a>
                              <a href="#dlgEditNotice" class="btn btn-primary btn-xs" data-toggle="modal"
                                 @click="show(notice)" v-tooltip="'Editar'">
                                <i class="fa fa-edit"></i>
                              </a>

                              <a href="#dlgDeleteNotice" class="btn btn-danger btn-xs" data-toggle="modal"
                                 @click="show(notice)" v-tooltip="'Eliminar'">
                                <i class="fa fa-trash"></i>
                              </a>
                            </td>
                          </tr>
                    </tbody>
                  </table>
            </div>
         <paginator :pagination="pagination" @changePage="index"></paginator>
      </div>
      <modal id="dlgNewNotice" title="Crear Aviso" close="Cancelar">
        <form class="form" role="form">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <input type="text" v-model="create.title" class="form-control">
                <label>Titulo del aviso</label>
                <p v-if="errors.title" class="text-danger">{{ errors.title[0] }}</p>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <input type="text" v-datepicker class="form-control" placeholder="Fecha de publicación" v-model="create.date_published">
                <label>Fecha Publicacion</label>
                <p v-if="errors.date_published" class="text-danger">{{ errors.date_published[0] }}</p>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <v-select label="value" :options="countries" v-model="create.countries" multiple></v-select>
                <label>País(es)</label>
                <p class="text-danger" v-if="errors.country_id">{{ errors.country_id[0] }}</p>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <v-select label="value" :options="companies" v-model="create.companies" multiple></v-select>
                <label>Empresa(s)</label>
                <p class="text-danger" v-if="errors.company_id">{{ errors.company_id[0] }}</p>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <input type="file" class="form-control" id="file">
                <label>Imagen</label>
                <p v-if="errors.image" class="text-danger">{{ errors.image[0] }}</p>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <textarea v-model="create.description" class="form-control"></textarea>
                <label>Descripción</label>
                <p v-if="errors.description" class="text-danger">{{ errors.description[0] }}</p>
              </div>
            </div>
          </div>
        </form>

        <button slot="btnSave" type="button" class="btn btn-primary" @click="store">Guardar</button>
      </modal>

      <modal id="dlgEditNotice" title="Editar Aviso" close="Cancelar">
        <form class="form" role="form">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                      <input type="text" v-model="edit.title" class="form-control">
                      <label>Titulo del aviso</label>
                      <p v-if="errors.title" class="text-danger">{{ errors.title[0] }}</p>
                  </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
                        <input type="text" v-datepicker class="form-control" placeholder="Fecha de publicación" v-model="edit.date_published">
                        <label>Fecha Publicacion</label>
                        <p v-if="errors.date_published" class="text-danger">{{ errors.date_published[0] }}</p>
                    </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    <v-select label="value" :options="countries" v-model="edit.country_value" multiple></v-select>
                    <label>País(es)</label>
                    <p class="text-danger" v-if="errors.country_id">{{ errors.country_id[0] }}</p>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    <v-select label="value" :options="companies" v-model="edit.company_value" multiple></v-select>
                    <label>Empresa(s)</label>
                    <p class="text-danger" v-if="errors.company_id">{{ errors.company_id[0] }}</p>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                      <input type="file" class="form-control" id="edit_file">
                      <label>Imagen</label>
                      <p v-if="errors.image" class="text-danger">{{ errors.image[0] }}</p>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                        <textarea v-model="edit.description" class="form-control"></textarea>
                        <label>Descripción</label>
                        <p v-if="errors.description" class="text-danger">{{ errors.description[0] }}</p>
                  </div>
                </div>
              </div>
        </form>

        <button slot="btnSave" type="button" class="btn btn-primary" @click="update">Actualizar</button>
      </modal>


      <modal-delete id="dlgDeleteNotice" title="¿Estás seguro de eliminar este aviso?">
        <button slot="btnDelete" type="button" class="btn btn-primary" @click="destroy">Si</button>
      </modal-delete>


    </div>
</template>

<script>

  import Notice from '../../../models/payroll/Notice';
  import Paginator from '../../../components/Paginator';
  import vSelect from "vue-select";
  //import Country from "../../../models/security/country/Country";
  import Company from "../../../models/payroll/Company";

  export default {
    components: {Paginator,vSelect},
      props: ['country_id'],
      data(){
        return {
          notices_list:[],
          countries: [],
          companies: [],
          pagination: {},
          create: {},
          edit: {},
          errors: {},
          isLoading: false,
          country_selected: 0
        }
      },
      created() {
        //this.loadDataCountry();
        //this.loadDataCompany();
        this.index();
      },
    methods: {
        loadDataCompany() {
          Company.pluck({}, data => this.companies = data);
        },
        loadDataCountry(){
          this.isLoading = true;
          Country.pluck({}, data => {
            this.countries = data;
              if(this.countries){
                this.index(1, this.countries[0].label);
              }
          });
        },
        chargeList(country){
           // this.isLoading = true;
           // this.notices = [];
           // this.pagination = [];
            if(country){
             //   this.index(1, country.label);
            }
        },
        index(page = 1) {
          let params = {
            page: page,
            country: this.country_id
          };

          Notice.get(params, data => {
              this.notices_list = data.data;
              this.pagination = data.meta;
          });

        },
        show(element) {
          this.errors = {};
          this.edit = element;
          console.log(this.edit);
          let countries_id = [];
          let companies_id = [];
          if(this.edit.countries){
            this.edit.countries.forEach(element => {
              countries_id.push({label: element.id, value: element.name});
            });
            this.edit.country_value = countries_id;
          }

          if(this.edit.companies){
            this.edit.companies.forEach(element => {
              companies_id.push({label: element.id, value: element.name});
            });
            this.edit.company_value = companies_id;
          }

        },
       store() {
         toastr.info('Guardando..');

         let file = document.getElementById('file').files[0];
         let formData = new FormData();

         if(this.create.countries){
             this.create.countries.forEach((element, key) => {
               formData.append('countries[' + key + ']', element.label);
            });
         }
         if(this.create.companies){
             this.create.companies.forEach((element, key) => {
               formData.append('companies[' + key + ']', element.label);
             });
          }

         if(this.create.date_published){
           this.create.date_published = moment(this.create.date_published, 'YYYY-MM-DD').format('YYYY-MM-DD');
         }

         formData.append('file', file ? file : '');
         formData.append('title', this.create.title ? this.create.title : '');
         formData.append('date_published', this.create.date_published ? this.create.date_published : '');
         formData.append('description', this.create.description ? this.create.description : '');

         Notice.store(formData, data => {
           toastr.clear();
           toastr.success('El aviso ha sido registrado.');
           if(this.countries.length > 0){
             this.index(1, this.countries[0].label);
           }

           this.create = {};
           $('#dlgNewNotice').modal('hide');
         }, errors => this.errors = errors);
       },
      update() {
        toastr.info('Actualizando..');
        let file = document.getElementById('edit_file').files[0];
        let formData = new FormData();

        if(this.edit.country_value){
          this.edit.country_value.forEach((element, key) => {
            formData.append('countries[' + key + ']', element.label);
          });
        }
        if(this.edit.company_value){
          this.edit.company_value.forEach((element, key) => {
            formData.append('companies[' + key + ']', element.label);
          });
        }

        if(this.edit.date_published){
          this.edit.date_published = moment(this.edit.date_published, 'YYYY-MM-DD').format('YYYY-MM-DD');
        }

        formData.append('file', file ? file : '');
        formData.append('title', this.edit.title ? this.edit.title : '');
        formData.append('date_published', this.edit.date_published ? this.edit.date_published : '');
        formData.append('description', this.edit.description ? this.edit.description : '');
        formData.append('_method', 'PUT');


        Notice.update(this.edit.id, formData, data => {
          toastr.clear();
          toastr.success('El aviso ha sido actualizado.');
          if(this.countries.length > 0){
            this.index(1, this.countries[0].label);
          }
          $('#dlgEditNotice').modal('hide');
        }, errors => this.errors = errors);


      },
      destroy() {
        toastr.info('Eliminando..');

        Notice.destroy(this.edit.id, data => {
          toastr.clear();
          toastr.success('El aviso ha sido eliminado.');
          if(this.countries.length > 0){
            this.index(1, this.countries[0].label);
          }
          $('#dlgDeleteNotice').modal('hide');
        });
      }

    }
  }
</script>