Investigate if render functions will help

[JustSteveKing]

Will using a render function instead of a template work better? Open to community thoughts on this one, it should change too much in implementation - but may be slightly quickly (very slightly) on processing

import { h } from 'vue'
export default {
  props: {
    id: {
      required: true,
      type: String
    }
  },
  render() {
    return h('div', {
      id: this.id
    })
  }
}

[mrspence]

👍

Useful edge-case: this would be good, using IDs adds complexity if you use vue2-frappe components inside your own iterative or repeated component.

Below are the current work-arounds.

Workaround for iterative custom components

App.vue

<your-component v-for="(item, index) in items" :key="item.uuid" :item="item"></your-component>

YourComponent.vue

<template>
    <div>
        <vue-frappe :id="item.uuid" ... />
    </div>
</template>

Workaround for multiple custom components

App.vue

<your-component name="something-unique-that-serves-no-purpose-for-developer"></your-component>
<your-component name="something-unique-that-serves-no-purpose-for-developer-2"></your-component>
<your-component name="something-unique-that-serves-no-purpose-for-developer-3"></your-component>

YourComponent.vue

<template>
    <div>
        <vue-frappe :id="name" ... />
    </div>
</template>