Skip to content

Instantly share code, notes, and snippets.

@jameshulse

jameshulse/Page.vue

Created May 30, 2018 21:05
Show Gist options
  • Save jameshulse/08a84f6ed2bd7156fc3b54af861ec402 to your computer and use it in GitHub Desktop.
Save jameshulse/08a84f6ed2bd7156fc3b54af861ec402 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jameshulse created this gist May 30, 2018.
    31 changes: 31 additions & 0 deletions Page.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    <template>
    <div>
    <model-overview
    :title="title"
    :models="models"
    @select="changeModel"
    @add="createModel"
    />

    <complex-form
    v-if="selectedModel"
    @update="updateModel"
    :schema="formSchema"
    />

    <slot v-else name="emptyState" />
    </div>
    </template>

    <script>
    export default {
    name: 'FormPage',
    props: ['api'],
    methods: {
    createModel() {
    this.api.create();
    },
    ...
    }
    };
    </script>
    20 changes: 20 additions & 0 deletions PageOne.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <template>
    <form-page
    title="Page One"
    :api="api"
    >
    <template slot="empty-state">
    Empty state for page one
    </template>
    </form-page>
    </template>

    <script>
    export default {
    data() {
    return {
    api: { create() { axios.post('/model-one/') },
    };
    }
    };
    </script>
    20 changes: 20 additions & 0 deletions PageTwo.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <template>
    <form-page
    title="Page Two"
    :api="api"
    >
    <template slot="empty-state">
    Empty state for page two
    </template>
    </form-page>
    </template>

    <script>
    export default {
    data() {
    return {
    api: { create() { axios.post('/model-one/') },
    };
    }
    };
    </script>