[Vuejs]-Problem with circular references in Vue.js – but only in CodeSandbox

by

0👍

In DisplayGroups.vue you use component vfg-display-fields by custom element name, but that component has name DisplayFields.
Base on documentation about Recursive Components, name of component must be the same as used in Vue.component(...).
In src / DisplayFields.vue you must write

export default {
  name: 'vfg-display-fields',
...

Or in src / index.js change name of component while register it

Vue.component('display-fields', DisplayFields);

and don’t forget to change element name in src / DisplayGroups.vue:

<template>
  <div>
    <display-fields .../>
  </div>
</template>

Hope this help you.

0👍

Per this helpful post I realised the problem was that I had published my package as ES6 code, while also using .vue files. I should have transpiled them to ES5 for publishing.

There is so much more for me to learn.

Leave a comment