<expand-details :atendente="{{ $id }}"></expand-details>

<template>
<div>
    <a class="pointer blue underline" @click="$modal.show('detalhes')">Expandir</a>

    <modal name="detalhes" height="auto">
        <div class="container p-2">
            <li v-for="detalhe in atendimentos">
                <p v-text="detalhe.atendimento_id"></p>
            </li>

            <div class="row">
                <div class="col-12">
                    <button
                        class="btn btn-default btn-sm"
                        @click="$modal.hide('detalhes')"
                    >Fechar</button>
                </div>
            </div>
        </div>
    </modal>
</div>

<script>
export default {
props: ['atendente'],

data() {
    return {
        atendimentos: {}
    }
},

mounted() {
    axios.get(atendentes, {
        params: {
            id: this.atendente
        }
    }).then((response) => {
        this.atendimentos = response.data
    })
}
}
</script>

<li v-for="detalhe in atendimentos" :key="detalhe.atendimento_id">
  <p v-text="detalhe.atendimento_id"></p>
</li>