<template>
  <div class="modal is-active has-text-centered">
    <div class="modal-background"></div>
    <div class="modal-card">
      <section class="modal-card-body">
        <slot></slot>
      </section>
    </div>
    <button class="modal-close" @click="$emit('close')"></button>
  </div>
</template>

<script>
export default {
  mounted () {
    document.getElementById('app').appendChild(this.$el)
  }
}
</script>

<template>
  <section class="section">
    <div class="container">
      <modal v-if="showModal" @close="showModal = false">
        <p>Some text here</p>
      </modal>
      <a class="button is-primary modal-button" @click="showModal = true">Show modal</a>
    </div>
  </section>
</template>

<script>
import Modal from './ui/Modal'

export default {
  data: function () {
    return {
      showModal: false
    }
  },
  components: {
    Modal
  }
}
</script>

const state = {
    forms     : []
}

const mutations = {
    ADD_FORM (state, newForm) {
      state.forms.push(newForm)
    }
}

const actions = {
    listForm: (context) => {
        Vue.http.get('form_models').then(resp => {
            $.each(resp.body, (i, data) => {
              const form = {
                      id  : data._id
                    , data: data.data
                    , html: data.html
                  }
              context.commit("ADD_FORM", form)
            })
        })
    }
}

<template>
  <table>
    <tbody>
      <tr v-for="(form,index) in forms"></tr>
    </tbody>
  </table>
</template>
<script>
  export default {
      created(){
          this.$store.dispatch('listForm')
      }
    , computed: {
          forms(){
              return this.$store.state.easyForms.forms
          }
      }
  }
</script>