为啥数字不能选中啊？设计如此，还是? 或者是有配置项可以配置吗？

Could you please release a new version with the latest changes?

I just noticed that it has a change that would make a difference for me. Namely removing whitespace around string values (15d8ff7#diff-7a5275c00fd81236fde90a0ce0f491f1R4).

多选时，通过watch 动态变更v-model的值，多选框没有被选中，对应的数据项有被click的效果

I installed this script in my website that is made using nuxt and vuejs but when i install your package my page shows a 404 error.

Can anyone know why?

在使用中发现会对data中的下级对象数据根据key来排序，是否可以增加参数来控制是否需要排序？现在哪里的代码是对data进行排序的，我没有发现，能否告知？谢谢

Hi @leezng

I've seen this pull request #14 is closed since "selectedPath" is conflicting with "selectedType".

However, I would like to see this feature with a configurable option.

You can let the user choose whether they want to highlight the selected item or not in both cases (tree or checkbox view).

What's your opinion on this idea? If you think this makes sense, let me know I will make a new pull request with this feature.

Cheers,
Ruby.

设置层级以后，json数据量很大的话，一个个点击展开非常麻烦，建议增加一键展开和一键叠起功能。

Please add the double quotation mark for the keys so that it can look the same as the json content.

Guys how i can maked values with types string wrapped by ' single quotes.

I want add a event: v-on:dblclick.native="handleCopy" copy the column json data
if json like this:

{
  "a": "123",
  "b": "234",
  "c": "345"
}

when i double click "c": "345" column, i will get the data of 345

i was do like this:

<vue-json-pretty
          :data="message"
          selectableType="tree"
          v-on:dblclick.native="handleCopy"
          ></vue-json-pretty>

handleCopy(path, data) {
      console.info(data)
    },

but the console log is undefined.

是不是可以把这个click和doubleclick的 event也给用户暴露出来，定制自己的双击复制功能。

Just for convenience, instead of overriding the default CSS when necessary, it'd be nice if it can be imported separately. (SCSS or CSS, w/e)

I prefer control over styling, rather than just having it thrown into DOM as is.

Two options here... But perhaps the best would be:

• Create a bundled output, that includes both JS and CSS and create another output where it has CSS and JS separately in build.

我把vue-json-pretty放在了element的下拉选择的el-option组件中，结果点击vue-json-pretty无法冒泡让el-select选中相应的值，因为被vue-json-pretty阻止冒泡了。如果开发者需要阻止冒泡，他可以选择在click事件上加上.stop修饰符。

项目本身作为一个 vue 的插件，建议把

{
  "dependencies": {
    "vue": "^2.3.0"
  },
}

改成

{
  "peerDependencies": {
    "vue": "^2.3.0"
  },
}

When you have multiple vue-json-pretty components on the page (say, created in a for loop), the click handler does not know which one is causing this event.

Consider this scenario: there are multiple json structures on the page, each one with same schema, but from different server. Whenever you click on a node in one of these, you should contact the respective server for more details on that node.

Currently it is not possible to do this, since the click-handler does not give back any information about the source component where the event is raised.

Also, is there anyway this vue-json-pretty could hold some user data attached with each of its instance (at the component level at the top) that it will supply back to the click handler? For example, would like to associate the server url with each vue-json-pretty instance, so that in the click handler we can:

<panel v-for="(server) in servers">
  <vue-json-pretty :data="svcDetails[server]" @click="onDetailsClick" :attachData="server"></vue-json-pretty>
</panel>

onDetailsClick: function(path, value, attachedData) { 
    const server = attachedData; // get the attached data
    axios.post(server, body: value);  // use the currently selected value with attached data somehow
}

Is it possible for the selection of these two symbols to be configurable?

多选时候绑定v-model，点击多选框，v-model绑定的数组一直是空数组；点击内容可以正常选择

I'm using this component inside a long list of items, so I'm using https://github.com/Akryum/vue-virtual-scroller to improve performance. I'm using its DynamicScroller which supports variable height entries, but which must be notified when an item's height changes. It would be useful for vue-json-pretty to emit an event when the user clicks on brackets to toggle visibility of nested data.

I took a look at the source; I see that the brackets mixin emits an 'update:visible' event to allow binding sync, but it looks like vue doesn't bubble that event up outside of vue-json-pretty, as I can't seem to bind them in my code.

I would like to be able to add specific css to certain nodes from a certain JSON key.

So for example, all text nodes are now vjs-value vjs-value__string but I'd like it when I use the following JSON:

stackTrace: 'trace here with lots of line endings and very unreadable if they are ignore'

That it would turn into vjs-value vjs-value__string stackTrace. Or maybe vjs-key-stackTrace to avoid existing CSS names.

In my case, I want to set white-space: pre-line to this specific strack trace string, otherwise it's quite unreadable.

In a displayed object, if I click on {} or [] brackets, they are collapsing. Can I turn this feature off somehow?

因为在数据量比较大，层级较深的时候，不好快速定位到要选取的节点位置

会导致提取的path路劲不正确

How is it possible to start with collapsed (closed) view of the JSON?
Right now it's by default expanded....

1.Missing serial number

2.Want to add, modify and delete data (preferably mobile)

3.Let's get the formatted string and paste it into the blog

🍻Now I have created a new react branch for developing the react version. The first phase will directly rewrite the original vue code, and the second phase will optimize and transform the existing code. Finally, the npm package will be released independently, and react and vue will be released in parallel on github.

Features

• Use latest React API.
• Use Typescript.
• Use Webpack 4.

Next

• Reduce size.
• Perform optimization under big data.

Thanks for this nice library. I am using on my report page to show various query results.
One of the result contains an array with lots of items and I wonder:
if I can make the field to be collapsed by default and just showing items count.

...
requests: [...] // 3 items

typeScript中使用有tslint提示，求一个.d.ts文件配置

This project is a great work. It is helpful. Thank you.

One small drawback is: Currently all the keys and values are styled the same. I would like to showcase the selectable keys and values differently so that users can immediately see only few keys and values are clickable. (Background color on hover is good, but without hovering on the node, just by looking at all the nodes it is difficult to say which nodes are clickable and which are not).

When using the function pathSelectable to customize the selectable behavior of a node, could you please add the classes vjs__selectable__value , vjs__selectable_key to the value and key respectively so that:

• we can customize the selectable key css, and selectable value css each separately
• and customize the mouse appearance, e.g. change the mouse to, say, pointer or hand etc. only for the selectable keys and values etc.

For example, the below screenshot illustrates the css overrides, where the usual keys and values take grey colors, and only the selectable keys and selectable values highlighted with different color, and underline, so that it is visually easy for users to understand that these keys and values are different and special.

当data为字符串时显示多了一个undefined的key，建下图描述

I want to add a copy button next to vue-json-pretty. Once the button clicked, I want to do the following:
a- Select all content of vue-json-pretty (highlight all the json inside)
b- Copy the selected json in the clipboard.

Hi, I always use vue-json-pretty component to render beautiful JSON data.

In my opinion, it should show line number of JSON data as option.
Is it interesting or useful? Please, let me know your ideas and comments.

Thank you,
World

When dealing with a big json, the CPU/MEM usage of chrome process will grow fast and the browser page will load slowly or even not display.

There is a sample json(size 1MB) in the attachment, copy and paste in the demo page can reproduce this condition. MEM usage of process will rich to nearly 2GB.

sample_1M.txt

1. Open https://leezng.github.io/vue-json-pretty
2. Paste this payload:

{"error":"<h1>x</h1>"}

Rather than showing the literal value <h1>x</h1>, the html is parsed and text is rendered bigger due to h1 tag.

I use vue-json-pretty with nuxtjs. But it dont work because "document is undefined".
Can you make a version for this integration?

如果不隐藏掉样式会很奇怪，向右偏移了。

Hi,

Is there a way to add typescript support ?
I've tried npm install @types/vue-json-pretty but package doesn't exist.

Thanks,

best regards,
Alban

JSBin

https://jsbin.com/fomudog/edit?html,console

Console

"[Vue warn]: Unknown custom element: <vue-json-pretty> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.

found in

---> <App>
       <Root>"

Code

// App
const App = Vue.component('app', {
  render(create) {
    return create('div', [
      create('vue-json-pretty', {
        props: {              
          data: "{ key: 'value' }"
        }
      })
    ])
  }      
})

// Use    
Vue.use(VueJsonPretty)
      
// Instance
new Vue({        
  render(create) {
    return create(App)
  }
}).$mount('#app')

By setting deep:1 I can collapse all nodes by default, but then if I want to fully expand one node I have to click on every child of that node (and their child nodes), which is not very convenient.

There should be an option to allow expanding all children nodes when parent node is expanded.