https://github.com/yansenlei/VJsoneditor

:large_blue_diamond: vue use jsoneditor
https://github.com/yansenlei/VJsoneditor

jsoneditor vue vue-component

Last synced: 6 days ago
JSON representation

:large_blue_diamond: vue use jsoneditor

• Host: GitHub
• URL: https://github.com/yansenlei/VJsoneditor
• Owner: yansenlei
• License: apache-2.0
• Created: 2018-04-15T05:19:40.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-07-08T11:41:44.000Z (over 2 years ago)
• Last Synced: 2024-11-05T07:02:23.159Z (10 days ago)
• Topics: jsoneditor, vue, vue-component
• Language: Vue
• Homepage: https://yansenlei.github.io/VJsoneditor/
• Size: 4.59 MB
• Stars: 182
• Watchers: 8
• Forks: 45
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/v-jsoneditor.svg)](https://badge.fury.io/js/v-jsoneditor)

[![Build Status](https://api.travis-ci.org/yansenlei/VJsoneditor.svg?branch=master)](https://travis-ci.org/yansenlei/VJsoneditor) 

[![license](https://img.shields.io/npm/l/express.svg)](https://github.com/yansenlei/VJsoneditor/blob/master/LICENSE) 

[![license](https://img.shields.io/npm/dm/v-jsoneditor.svg)](https://github.com/yansenlei/VJsoneditor/blob/master/LICENSE) 

# v-jsoneditor

> Vue JSONEditor

## Try the demo

https://yansenlei.github.io/VJsoneditor/

![demo](./v-jsoneditor.gif)

## Installation

```bash

npm install v-jsoneditor

```

## Using

### Import globally

```javascript

import Vue from 'vue'

import VJsoneditor from 'v-jsoneditor'

Vue.use(VJsoneditor)

```

### Import

```javascript

import VJsoneditor from 'v-jsoneditor'

export default {

    name: 'app',

    components: {

        VJsoneditor

    },

    data() {

        return {

            json: {

                "hello": "vue"

            }

        }

    },

    methods: {

        onError() {

            console.log('error')

        }

    }

}

```

### Browser

```html

```

### Use in template

```html

```

### Options

| Name           | Description                                                                                                                                                   | type    | default          |

| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----: | :--------------: |

| options        | Jsoneditor params, You can look at the detailed  [configuration](https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#configuration-options?blank) | Object  | { mode: 'code' } |

| value(v-model) | Object value                                                                                                                                                  | Object  | { }              |

| plus           | Whether full screen switching is added                                                                                                                        | Boolean | true             |

| height         | Default height                                                                                                                                                | String  | -                |

### Events

| Name  | Description    |

| ----- | -------------- |

| error | Error callback |

## Build Setup

``` bash

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

```