Parliamentians modal

modal.vue

<template>
<div class="modal is-active" v-if="active">
 <div class="modal-background"></div>
 <div class="container">
  <div class="card">
    <header class="modal-card-head">
      <button class="delete" aria-label="close" @click="closeModal"></button>
    </header>
      <section class="modal-card-body">
        <div class="columns">
          <div class="column is-5">
            <div class="card">
              <div class="card-image">
                  <figure class="image is-1by1">
                    <img :src="content.IdentificacaoParlamentar.UrlFotoParlamentar">
                </figure>
              </div>
            </div>
          </div>
          <div class="column is-7">
            <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label">Código</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input
                  class="input is-small"
                  type="text"
                  v-model="content.IdentificacaoParlamentar.CodigoParlamentar">
                </p>
              </div>
            </div>
          </div>

                   <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label">Email</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input
                  class="input is-small"
                  type="email"
                  v-model="content.IdentificacaoParlamentar.EmailParlamentar">
                </p>
              </div>
            </div>
          </div>

                   <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label">Tratamento</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input
                  class="input is-small"
                  type="text"
                  v-model="content.IdentificacaoParlamentar.FormaTratamento">
                </p>
              </div>
            </div>
          </div>

                   <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label">Nome</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input
                  class="input is-small"
                  type="text"
                  v-model="content.IdentificacaoParlamentar.NomeCompletoParlamentar">
                </p>
              </div>
            </div>
          </div>

                   <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label">Sexo</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input
                  class="input is-small"
                  type="text"
                  v-model="content.IdentificacaoParlamentar.SexoParlamentar">
                </p>
              </div>
            </div>
          </div>

                   <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label">Partido</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input
                  class="input is-small"
                  type="text"
                  v-model="content.IdentificacaoParlamentar.SiglaPartidoParlamentar">
                </p>
              </div>
            </div>
          </div>

                   <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label">UF</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input
                  class="input is-small"
                  type="text"
                  v-model="content.IdentificacaoParlamentar.UfParlamentar">
                </p>
              </div>
            </div>
          </div>

                   <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label">Página</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input
                  class="input is-small"
                  type="text"
                  v-model="content.IdentificacaoParlamentar.UrlPaginaParlamentar">
                </p>
              </div>
            </div>
          </div>
          </div>
        </div>
      </section>
    </div>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button" @click="closeModal">Cancel</button>
    </footer>
  </div>
</div>
</template>

<script>
export default {
  name: 'parliamentarian-modal',
  props: {
    active: {
      type: Boolean,
      default: false
    },
    content: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    closeModal () {
      this.$emit('update', false)
    }
  }

}
</script>

<style>

</style>