We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
2.7.14
codesandbox.io
Wrap one or more refs in an array and try to render in the template with v-for or an indexed reference.
v-for
<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];
The template should unwrap the refs automatically.
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
unref
AppWorkingOptionsApi.vue
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.
ref
The text was updated successfully, but these errors were encountered:
<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
Sorry, something went wrong.
No branches or pull requests
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.What is expected?
The template should unwrap the refs automatically.
What is actually happening?
Console error on render:
The reproduction link has 2 alternate working examples:
AppWorking.vue
unwraps each array element manually in the template withunref
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
.The text was updated successfully, but these errors were encountered: