_id.vue

<template>
    <div>
        <v-tabs
            v-model="langSelected"
            centered
            color="primary"
            dark
            icons-and-text
        >
            <v-tabs-slider color="yellow" />

            <v-tab
                v-for="lang in languages"
                :key="lang.id"
            >
                {{ lang.name }}
            </v-tab>

            <v-tab-item
                v-for="lang of languages"
                :key="lang.id"
            >
                <v-card flat>
                    <v-container grid-list-md>
                        <v-layout wrap>
                            <v-flex xs12 sm6>
                                <v-text-field
                                    v-model="lang.meta.name"
                                    label="Nome do Hotel"
                                    :error-messages="errors.name"
                                    :rules="nameRules"
                                    outline
                                />
                            </v-flex>

                            <v-flex xs12 sm6>
                                <v-text-field
                                    v-model="lang.meta.address"
                                    label="Endereço"
                                    :error-messages="errors.address"
                                    outline
                                />
                            </v-flex>

                            <v-flex xs12 sm12>
                                <v-textarea
                                    v-model="lang.meta.description"
                                    label="Descrição"
                                    :error-messages="errors.description"
                                >
                                    <template v-slot:label>
                                        <div>
                                            Descrição do Hotel<small>(Obrigatório)</small>
                                        </div>
                                    </template>
                                </v-textarea>
                            </v-flex>
                        </v-layout>

                        <v-divider />

                        <v-layout wrap>
                            <v-toolbar card color="white">
                                <v-text-field
                                    v-model="search"
                                    flat
                                    solo
                                    prepend-icon="search"
                                    placeholder="Busque por um hoteis"
                                    hide-details
                                    class="hidden-sm-and-down"
                                />

                                <v-btn
                                    class="letra-button-normal"
                                    round
                                    color="primary"
                                    @click="addRow()"
                                >
                                    <v-icon>add</v-icon> <strong> Quartos</strong>
                                </v-btn>
                            </v-toolbar>

                            <v-divider />

                            <v-data-table
                                :headers="complex.headers"
                                :items="lang.room"
                                :search="search"
                                :rows-per-page-items="[5,10,25,{text:'Todos','value':-1}]"
                                rows-per-page-text="Itens por paginas"
                                no-results-text="Nenhum resultado encontrado"
                                class="elevation-1"
                                item-key="id"
                                :loading="loading"
                            >
                                <template slot="items" slot-scope="props">
                                    <td>{{ props.item.id }}</td>
                                    <td>
                                        <v-flex xs12 sm6>
                                            <v-text-field
                                                v-model="props.item.type"
                                                :error-messages="errors.type"
                                            />
                                        </v-flex>
                                    </td>
                                    <td>
                                        <v-flex xs12 sm6>
                                            <v-text-field
                                                v-model.number="props.item.price"
                                                :error-messages="errors.type"
                                            />
                                        </v-flex>
                                    </td>
                                    <v-flex xs12 sm12>
                                        <v-textarea
                                            v-model="props.item.description"
                                            label="Descrição do quarto"
                                            :error-messages="errors.description"
                                        >
                                            <template v-slot:label>
                                                <div>
                                                    Descrição do Quarto <small>(Obrigatório)</small>
                                                </div>
                                            </template>
                                        </v-textarea>
                                    </v-flex>
                                    <td>
                                        <v-tooltip top>
                                            <template v-slot:activator="{ on }">
                                                <v-btn
                                                    flat
                                                    icon
                                                    dark
                                                    color="primary"
                                                    small
                                                    @click="saveRoom(props.item)"
                                                    v-on="on"
                                                >
                                                    <v-icon>{{ props.item.id ? 'edit' : 'save' }}</v-icon>
                                                </v-btn>
                                            </template>
                                            <span> {{ props.item.id ? 'Atualizar' : 'Salvar' }}</span>
                                        </v-tooltip>

                                        <v-tooltip top>
                                            <template v-slot:activator="{ on }">
                                                <v-btn
                                                    flat
                                                    icon
                                                    dark
                                                    color="error"
                                                    small
                                                    @click="deleteRoom(props.item.id)"
                                                    v-on="on"
                                                >
                                                    <v-icon>delete</v-icon>
                                                </v-btn>
                                            </template>
                                            <span>deletar</span>
                                        </v-tooltip>

                                        <v-tooltip top>
                                            <template v-slot:activator="{ on }">
                                                <v-btn
                                                    flat
                                                    icon
                                                    dark
                                                    color="blue"
                                                    small
                                                    v-on="on"
                                                    @click="addMedias(props.item)"
                                                >
                                                    <v-icon>add_photo_alternate</v-icon>
                                                </v-btn>
                                            </template>
                                            <span>Adicionar Imagens</span>
                                        </v-tooltip>
                                    </td>
                                </template>

                                <template
                                    slot="pageText"
                                    slot-scope="item"
                                >
                                    {{ item.pageStart }} - {{ item.pageStop }} de {{ item.itemsLength }}
                                </template>
                            </v-data-table><!--fecha table !-->
                        </v-layout>

                        <v-divider />

                        <v-card-actions>
                            <v-spacer />

                            <v-btn
                                round
                                color="primary"
                                :loading="loading"
                                @click="saveAll()"
                            >
                                Salvar
                            </v-btn>
                        </v-card-actions>
                    </v-container>
                </v-card>
            </v-tab-item>
        </v-tabs>

        <v-dialog v-model="openMediasModal" max-width="900px" @keydown.esc="openMediasModal = false">
            <add-media-modal
                v-if="openMediasModal"
                :medias="mediaSelected"
                :room="roomSelected"
                @closeAddMedias="openMediasModal = false"
            />
        </v-dialog>
    </div>
</template>
<script>
import AddMediaModal from '~/components/hotels/room/AddMediaModal.vue';
import { mapMutations } from 'vuex';
// import { cloneDeep } from 'lodash';

export default {
    middleware: 'auth',
    name: 'HotelAddMetas',
    components: {
        AddMediaModal
    },

    data() {
        return {
            id: this.$route.params.id,
            hotel: [],
            mediaSelected: [],
            roomSelected: {},

            openMediasModal: false,

            loading: false,
            nameRules: [
                v => !!v || 'O hotel precisa de um título'
            ],

            languages: [],
            langSelected: 0,
            errors: {},
            search: '',
            complex: {
                headers: [
                    {
                        text: 'id',
                        value: 'id',
                        sortable: false
                    },
                    {
                        text: 'Tipo de Quarto',
                        value: 'type'
                    },

                    {
                        text: 'Preço',
                        value: 'price'
                    },

                    {
                        text: 'Descrição',
                        value: 'description'
                    },

                    {
                        text: 'Ações',
                        value: '',
                        sortable: false
                    }
                ]
            }

        };
    },

    computed: {
        // aqui eu defino no meu language_id no methods "save"
        selectedLanguage() {
            return this.languages[this.langSelected];
        }
    },

    created() {
        this.fetchHotel(this.id);
    },

    methods: {
        fetchHotel(id) {
            this.$axios.get(`hotels/${id}`, this.hotel).then((response) => {
                this.hotel = response.data.data;
                this.fetchLanguages();
                console.log(this.hotel);
            })
            .catch((error) => {
                this.errors = error.response.data.data.errors;
            });
        },

        addMedias(room) {
            this.openMediasModal = true;
            this.mediaSelected = room.medias;
            this.roomSelected = room;
            console.log(this.mediaSelected);
            console.log('room selected:' + this.roomSelected);
        },

        addRow() {
            this.selectedLanguage.room.push({ type: '', price: '', description: '' });
            console.log(this.selectedLanguage.room);
        },

        saveRoom(room) {
            room.id ? this.updateRoom(room) : this.createRoom(room);
        },

        createRoom(room) {
            console.log(room);
            const data = {

                type: room.type,
                price: room.price,
                description: room.description,
                language_id: this.selectedLanguage.id,

            };

            this.loading = true;

            this.$axios.post(`hotels/${this.id}/rooms`, data).then((response) => {
                this.data = response.data.data;
                this.setSnack('Dados salvos com sucesso!');
                this.$router.push({ name: 'hotels-id', params: { id: this.id } });
                this.$emit('add', this.data);
                this.loading = false;
                console.log(this.data);
            })
            .catch((error) => {
                this.loading = false;
                this.setSnack('error');
                this.errors = error.response.data.errors;
            });
        },

        updateRoom(room) {
            const data = {
                type: room.type,
                price: room.price,
                description: room.description,
                language_id: room.language.id,
            };

            this.loading = true;

            this.$axios.put(`hotels/${this.id}/rooms/${room.id}`, data).then((response) => {
                this.data = response.data.data;
                this.setSnack('Dados salvos com sucesso!');
                this.loading = false;
                console.log(this.data);
            })
            .catch((error) => {
                this.loading = false;
                this.setSnack('error');
                this.errors = error.response.data.errors;
            });
        },

        deleteRoom(id) {
            if (confirm('Tem certeza que deseja excluir este Quarto?')) {
                const index = this.selectedLanguage.room.indexOf(id);
                this.selectedLanguage.room.splice(index, 1);
                this.$axios.delete(`hotels/${this.id}/rooms/${id}`).then((response) => {
                   // this.$router.push({ name: 'users' });
                    this.setSnack('Quarto deletado com sucesso!');
                })
            .catch((error) => {
                this.setSnack('error');
                this.errors = error.response.data.errors;

                this.loading = false;
            });
            }
        },

        fetchLanguages() {
            this.$axios.get('languages', this.languages).then((response) => {
                this.languages = response.data.data;
                console.log(response.data.data);

                this.languages.forEach((language) => {
                    const meta = this.hotel.metas.find(obj => obj.language.id === language.id) || {};
                    this.$set(language, 'meta', meta.id ? meta : { title: '', address: '', description: '' });

                    const room = this.hotel.rooms.filter(obj => obj.language.id === language.id);
                    this.$set(language, 'room', room);
                });

              /*
              this.languages.forEach((language) => {
                    const meta = this.metas.filter(meta => meta.language_id === language.id);
                    language.meta = meta.length ? meta[0] : { title: '', address: '', description: '' };
                });
                */
               // console.log(this.languages);
                setTimeout(() => {
                    this.loading = false;
                }, 1000);
            })
            .catch((error) => {
                this.errors = error.response.data.data.errors;
                this.loading = false;
            });
        },

        saveMetas() {
            const data = {
                ...this.metas,
                name: this.selectedLanguage.meta.name,
                address: this.selectedLanguage.meta.address,
                description: this.selectedLanguage.meta.description,
                language_id: this.selectedLanguage.id,
               // hotel_id: this.id
            };

            this.loading = true;

            this.$axios.post(`hotels/${this.id}/metas`, data).then((response) => {
                this.data = response.data.data;
                this.setSnack('Dados salvos com sucesso!');
                this.$emit('add', this.data);
                this.loading = false;
                console.log(this.data);
            })
            .catch((error) => {
                this.loading = false;
                this.setSnack('error');
                this.errors = error.response.data.errors;
            });
        },

        saveAll() {
            this.saveMetas();
        },

        ...mapMutations({
            setSnack: 'snackbar/setSnack'
        }),

    }
};
</script>

AddMidiasModal.vue

<template>
    <v-card>
        <v-card-title>
            <v-subheader>
                <span class="headline">Imagens do Quarto</span>
            </v-subheader>

            <v-spacer />

            <v-btn
                icon
                color="error"
                flat
                @click="close"
            >
                <v-icon>close</v-icon>
            </v-btn>
        </v-card-title>

        <v-divider />

        <v-container grid-list-md>
            <v-layout wrap>
                <v-flex
                    v-for="media in medias"
                    :key="media.id"
                    xs4
                    d-flex
                >
                    <v-card flat tile class="d-flex">
                        <v-hover>
                            <v-img
                                slot-scope="{ hover }"
                                :src="media.url"
                                :lazy-src="media.url"
                                aspect-ratio="1"
                                class="grey lighten-2"
                            >
                                <template v-slot:placeholder>
                                    <v-layout
                                        fill-height
                                        align-center
                                        justify-center
                                        ma-0
                                    >
                                        <v-progress-circular indeterminate color="grey lighten-5" />
                                    </v-layout>
                                </template>

                                <v-btn
                                    v-if="hover"
                                    icon
                                    color="error"
                                    flat
                                    @click="deleteMedia(media.id)"
                                >
                                    <v-icon>delete</v-icon>
                                </v-btn>
                            </v-img>
                        </v-hover>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-container>

        <v-divider />

        <v-card-actions>
            <v-spacer />

            <v-btn
                round
                color="primary"
                :loading="loading"
                @click="save"
            >
                Salvar
            </v-btn>
        </v-card-actions>
    </v-card>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
    middleware: 'auth',
    name: 'AddMediaModal',
    props: {
        // eslint-disable-next-line vue/require-default-prop
        medias: { type: Array },
        room: { type: Object, required: true }
    },
    data() {
        return {
            errors: {},
            loading: false,
        };
    },

    created() {
        console.log('minha props na modal:' + this.medias);
    },

    methods: {

        save() {
            const data = {
                ...this.user,
            };

            this.loading = true;

            this.$axios.post(`register`, data).then((response) => {
                this.data = response.data.data;
                this.setSnack('Dados salvos com sucesso!');
                this.$emit('add', this.data);
                this.loading = false;
                console.log(this.data);
            })
            .catch((error) => {
                this.setSnack('error');
                this.errors = error.response.data.errors;

                this.loading = false;
            });
        },

        close() {
            this.$emit('closeAddMedias');
        },

        deleteMedia(id) {
            console.log(id);
            if (confirm('Tem certeza que deseja excluir essa imagem?')) {
                const index = this.medias.indexOf(id);
                this.medias.splice(index, 1);
                this.$axios.delete(`room/${this.room.id}/medias/${id}`).then((response) => {
                   // this.$router.push({ name: 'users' });
                    this.setSnack('imagem deletada com sucesso!');
                })
            .catch((error) => {
                this.setSnack('error');
                this.errors = error.response.data.errors;

                this.loading = false;
            });
            }
        },

        ...mapMutations({
            setSnack: 'snackbar/setSnack'
        }),

    }
};
</script>

{
   [
    { 
      "id": 1, 
      "name": "English",
      "meta": { 
        "title": "Title in English",
        "address": "Address",
        "description": "Description"
      },
      "rooms": [
        { 
          "name": "Room name in Enlighs",
          "description": "Room description in English"
        }
      ]
    },
    { 
      "id": 1, 
      "name": "Portuguese",
      "meta": { 
        "title": "",
        "address": "",
        "description": ""
      },
      "rooms": []
    },
    { 
      "id": 1, 
      "name": "Espanhol",
      "meta": { 
        "title": "Título em Espanhol",
        "address": "",
        "description": ""
      },
      "rooms": [
        { 
          "name": "Room 1",
          "description": "descrição"
        },
        { 
          "name": "2",
          "description": "Descricao"
        }
      ]
    }
  ]
}