Events

You can also bind events to endpoints to have more control over REST communications

• success: emits when endpoint request successfully sent
• error: emits when endpoint gets error
• cancel: emits when endpoint canceled (error event not emitted on cancellation)
• loading: emits when endpoint gets to loading
• timeout: emits when endpoint gets timeout error

Attach event listeners

You can add listeners on chimera property inside $options or directly on endpoint definition

<template>
  <div class="example-box">
    <ul v-if="users.data">
      <li
        v-for="user in users.data"
        :key="user.id"
      >
        {{ user.name }}
      </li>
    </ul>
    <button @click="users.reload()">
      Reload
    </button> <span v-if="users.loading">Loading...</span>
    <div>
      <p
        v-for="(ev, i) in events"
        :key="i"
      >
        {{ ev }} {{ i+1 }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      events: []
    }
  },
  chimera: {
    $options: {
      on: {
        success () {
          this.events.push('"success" listener called on any endpoint')
        }
      }
    },
    users: {
      url: '/users',
      key: 'users',
      on: {
        success () {
          this.events.push('"success" listener called on users endpoint')
        }
      }
    }
  }
}
</script>

Attach programmatically

Use on method to attach events to endpoints

export default {

    mounted () {
       this.$chimera.users.on('success', () => {
          console.log('!')
       })
    }
}