tylerkrupicka / vue-json-component Goto Github PK

Hey, really nice work you did there, very useful !
Everything is working nice, except that I can't modify the style. I've been trying to directly write the object inside the props, or pass it an object written into a variable, but it has no effect.

Can you make it editable key and editable value?
thank you

Hi ,
i need cdn file to Import in Browser
thank you

Hi,

I want to build a Vue.js frontend (with TypeScript probably) for a versioned document store (https://sirix.io and https://github.com/sirixdb/sirix). That said I'm very new to the frontend world, in my day to day job I'm a backend engineer.

I'd like to begin with a simple tree-view maybe merging and displaying changes already in this view. However, to begin with I'd probably just want to display one revision of JSON-document, which is stored in a binary format in SirixDB. With a REST-API I can simply retrieve either the whole tree at once or... for instance always only the children which are visible in the tree-view.

I really like the look of your simple tree-component, especially as I don't have to convert the JSON data into another JSON format first. That said, I'd love to use a similar view for the XML-documents stored in SirixDB, too. Do you think that's relatively easy doable? Furthermore I like to change the indentation a bit and somehow I'm not really sure how I can serialize database resource internal stuff within my JsonSerializer as for instance unique node-Keys, which can be used to select a node directly (or what's the best JSON-format to add this type of metadata for object record keys for instance).

BTW: I'm always looking for collaborators, but yeah, maybe just a dream ;-) But I'm pretty sure that a great frontend, which displays the diffing capabilities of SirixDB in nice visualizations with D3js in the next step will make a huge difference :-)

kind regards
Johannes

hi. i fork your project for create my modified version of this vue-json-tree-view for a thesis project. I have some problem with build of this (maybe i'm not good at ts or idk).
I'm tryng to change the words at root node from nTot properties to nTot documents and each object from properties to fields .
Another work is to have pagination (the document/object that i represent have no name but your tool give a number. but for myself i create a pagination because of large number of objects but that aren't option for changing the first number of that document (it return to 0). if you can add these features i appreciate so much, or maybe you can give istruction fro building your project to my forked)

node_modules/vue-json-component/dist/index.module.js:1:25: error: Could not resolve "tslib" (mark it as external to exclude it from the bundle)

https://github.com/Metsavend/vue-json-component-vue-3

if its okey its here. No contribution removede you are there like owner and i like modifier :)

ERROR in ./node_modules/vue-json-component/dist/index.module.js
Module not found: Error: Can't resolve 'tslib' in '/var/www/node_modules/vue-json-component/dist'
 @ ./node_modules/vue-json-component/dist/index.module.js 1:0-33 429:40-48
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/Domain/Log/LogTable.vue?vue&type=script&lang=js&
 @ ./resources/js/Domain/Log/LogTable.vue?vue&type=script&lang=js&
 @ ./resources/js/Domain/Log/LogTable.vue
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

yarn add tslib helped but seems that this is tricky workaround.

Hi Tyler
Nice useful component, I like it. My question : is there a way to select a leaf item and get its value? I would like to emit it to the parent component.
Thank you

Luca

It would be awesome if the selected nodes had a slightly different styling. This way we could do:

data(){ 
    return {
        selectedPaths: [{ path: "root.foo.bar" }]
    }
}

This could then be supplied to the jsonView with:

<JSONView :data="model" @selected="updatePaths" v-if="loaded" :selection="selectedPaths" />

When placed anywhere within a Vuetify v-form, ANY interaction with <json-view> (specifically, clicking on 'folder' node) automatically submits the form. Obviously, this is incorrect behavior. I can find no way to prevent this. Tried v-on:selected, which only appears to be fired on leaf node selection, not folder node selection, so it doesn't help.

I am trying to add Vue Json component to an existing project. I'm following the instructions but I am getting this error:

-bash: npm: command not found .

I'm getting the following error when trying to use this component in a Vue 3 app.

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"                                                                                                                                                                [80/1097]                                                                                                                                                                                                                                                                                    node_modules/vue-json-component/dist/index.module.js:2:7:
      2 │ import Vue from 'vue';                

11:48:01 AM [vite] error while updating dependencies:Error: Build failed with 1 error:                                                                                                                                                                                                                                               node_modules/vue-json-component/dist/index.module.js:2:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"                                                                                                                      at failureErrorWithLog (/mnt/d/.../vue_7/node_modules/esbuild/lib/main.js:1605:15)                                                                                                                                                                at /mnt/d/.../vue_7/node_modules/esbuild/lib/main.js:1251:28
    at runOnEndCallbacks (/mnt/d/.../vue_7/node_modules/esbuild/lib/main.js:1034:63)
    at buildResponseToResult (/mnt/d/.../vue_7/node_modules/esbuild/lib/main.js:1249:7)
    at /mnt/d/.../vue_7/node_modules/esbuild/lib/main.js:1358:14
    at /mnt/d/.../vue_7/node_modules/esbuild/lib/main.js:666:9
    at handleIncomingPacket (/mnt/d/.../vue_7/node_modules/esbuild/lib/main.js:763:9)
    at Socket.readFromStdout (/mnt/d/.../vue_7/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:315:12)