Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"TypeError: Converting circular structure to JSON" when rendering refs wrapped in an array #12936

Open
tcummin2 opened this issue Jan 18, 2023 · 1 comment

Comments

@tcummin2
Copy link

Version

2.7.14

Reproduction link

codesandbox.io

Steps to reproduce

Wrap one or more refs in an array and try to render in the template with v-for or an indexed reference.

<div v-for="(count, i) in counts" :key="i">
  {{ count }}
</div>

...

const yesCount = ref(0);
const noCount = ref(0);
const yes = computed(() => "Yes: " + yesCount.value);
const no = computed(() => "No: " + noCount.value);

const counts = [yes, no];

What is expected?

The template should unwrap the refs automatically.

What is actually happening?

Console error on render:

[Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Watcher'

    |     property 'vm' -> object with constructor 'VueComponent'

    |     property '_scope' -> object with constructor 'EffectScope'

    |     property 'effects' -> object with constructor 'Array'

    --- index 0 closes the circle"

The reproduction link has 2 alternate working examples:

  • AppWorking.vue unwraps each array element manually in the template with unref
  • AppWorkingOptionsApi.vue creates the array as a computed property through the options API.

I've tried wrapping the array in a ref or computed ref and neither works.

This same reproduction works with no issue in the Vue 3 SFC playground.

I encountered this issue with trying to render a list of objects where each object contained a property whose value was a ref.

@NoeMV
Copy link

NoeMV commented Feb 19, 2023

<div v-for="(count, i) in counts" :key="i"> {{ count.value }} </div>

I think you are missing the .value in your template, since for ref in arrays and collections you need to do the unwrap manually, see https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref-unwrapping-in-arrays-and-collections

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants