defineRelation

This composable can be used to define the icon relation to the given entity and a method to visit the given relation. Previously you had to implement visitRelation manually. This is now defined based on the composable.

TIP

This composition exports an array. That way it is really easy give the keys a unique name. Read more about Array destructuring (opens new window)

Usage

<template>
  <Relations>
    <Relation right="firstRelation" :route-fn="firstRelationMethod" :icon="firstRelationIcon">First relation</Relation>
    <Relation right="secondRelation" :route-fn="secondRelationMethod" :icon="secondRelationIcon">Second relation</Relation>
  </Relations>
</template>

<script>
import { defineRelation } from '@jdi/vue-backoffice-library'

export default {
  setup(_, context) {
    const [firstRelationIcon, firstRelationMethod] = defineRelation(context, 'firstRelation')
    const [secondRelationIcon, secondRelationMethod] = defineRelation(context, 'secondRelation')

    return {
      firstRelationIcon,
      firstRelationMethod,
      secondRelationIcon,
      secondRelationMethod
    }
  }
}
</script>