User.vue

<template>
  <promised :promise="itemPromise">
    <template v-slot:pending>
      <b-spinner type="grow" class="w-25"/>
    </template>
    <template v-slot="item">
      <b-row>
        <b-col cols="12" lg="8" class="mb-3">
          <b-card header="Edit">
            <b-form>
              <b-form-group label="Name" label-for="user_name" label-cols-sm="3">
                <b-form-input id="user_name" v-model="item.name" required placeholder="Name" trim/>
              </b-form-group>
              <b-form-group label="E-Mail" label-for="user_email" label-cols-sm="3">
                <b-form-input id="user_email" v-model="item.email" required placeholder="E-Mail" trim type="email"/>
              </b-form-group>
            </b-form>
          </b-card>
        </b-col>
        <b-col cols="12" lg="4">
          <b-card header="Actions">
            <b-button-group vertical>
              <b-button>Send Password Reset</b-button>
            </b-button-group>
          </b-card>
        </b-col>
      </b-row>
    </template>
    <template v-slot:rejected="error">
      <b-alert show variant="danger">
        <h4 class="alert-heading">Ouch!</h4>
        <p class="mb-0">
          Something went wrong: {{ error.message }}
        </p>
      </b-alert>
    </template>
  </promised>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      itemPromise: this.$store.dispatch('jv/get', 'user/' + this.$route.params.id)
    }
  }
}
</script>

<style scoped>

</style>