Can't follow the example with Vue3
See original GitHub issueI tried following the example with Vue3, installed with npm install vue-json-pretty@next --save
here’s the code
<template>
<div>
<vue-json-pretty :path="'res'" :data="{ key: 'value' }"> </vue-json-pretty>
</div>
</template>
<script>
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";
export default {
components: {
VueJsonPretty,
},
};
</script>
It keeps throwing these errors
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.<anonymous> (vue-json-pretty.js:1:9751)
at renderComponentRoot (runtime-core.esm-bundler.js:893:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5030:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
at setupRenderEffect (runtime-core.esm-bundler.js:5156:9)
at mountComponent (runtime-core.esm-bundler.js:4939:9)
at processComponent (runtime-core.esm-bundler.js:4897:17)
at patch (runtime-core.esm-bundler.js:4489:21)
at mountChildren (runtime-core.esm-bundler.js:4685:13)
at mountElement (runtime-core.esm-bundler.js:4594:17)
and other warnings about "was accessed but not defined
Could you help please?
Issue Analytics
- State:
- Created a year ago
- Comments:7 (2 by maintainers)
Top Results From Across the Web
can't use template ref on component in vue 3 composition api
I ran into this issue today. The problem is that, when using the <script setup> pattern, none of the declared variables are returned....
Read more >Vue 3 Composition API: Ref vs Reactive - Dan Vega
With the Options API, we have to follow some rules when defining reactive data and the Composition API is no different. You can't...
Read more >Understanding the New Reactivity System in Vue 3 - SitePoint
In the above example, we can see that none of the three methods is working. We can't add a new property to the...
Read more >Reactivity in Depth - Vue.js
This whenDepsChange() function has the following tasks: Track when a variable is read. E.g. when evaluating the expression A0 + A1 , both...
Read more >A Complete Guide to Vue Lifecycle Hooks - with Vue 3 Updates
Lifecycle hooks in both Vue 2 and Vue 3 work very similarly – we still have access to the ... Take the following...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
For me it wasn’t really a problem with the package. I just installed the Vue2 version instead of the Vue3 version. I made a mistake. After I got the correct version everything worked as expected. But with the wrong version I got the same error as @phootip got. Which is to be expected. So I guess he also installed the wrong version.
retry
npm run dev
, its worked for me.