Allowing the fallback component to accept props

[wallyjue]

Hi, thanks for the great work. This PR aims to allow the fallback component able to aceept props. Hope it helps.

[dillonchanis]

Hey @wallyjue thanks for your interest in this and taking the time to submit a PR! I was wondering if there was a use case you had in mind for this?

I'm thinking rather the fallback component being able to accept arbitrary props we give it access to the same err and info the errorCaptured hook receives.

[wallyjue]

Hi @dillonchanis,

My use case is to render a list and each item in the list has an id (send as a prop). When any of them goes wrong, my user could see which of them is wrong by the id, so my need is the id should be rendered. I am not sure if err and info passing to errorCaptured has these information? If yes that would be nice.

[dillonchanis]

Hey @wallyjue,

I will probably knock this out today. There was another request to add a slot-scope option to the component. I'll include this change with that branch instead of merging this directly into master. I'll still mention you as a contributor to the README.

I'll keep the original API you describe here.

Example Usage:

<ul class="contact-list">
    <template v-for="contact in contacts">
      <error-boundary :key="contact.id" 
                      :fall-back="fallBack" 
                      :params="{ id: contact.id }">
        <app-contact :contact="contact" />
      </error-boundary>
    </template>
</ul>

import MyCustomFallbackComponent from '...'

export default {
  data: () => ({
    fallBack: MyCustomFallbackComponent,
    contacts: [...]
  })
}

Then in your custom fallback component:

<template>
  <div>
    Could not render - {{ id }}
  </div>
</template>

<script>
export default {
  props: ['id'],
}
</script>