Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yansenlei/VJsoneditor
:large_blue_diamond: vue use jsoneditor
https://github.com/yansenlei/VJsoneditor
jsoneditor vue vue-component
Last synced: 3 months 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 (almost 7 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 (4 months 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
[](https://badge.fury.io/js/v-jsoneditor)
[](https://travis-ci.org/yansenlei/VJsoneditor)
[](https://github.com/yansenlei/VJsoneditor/blob/master/LICENSE)
[](https://github.com/yansenlei/VJsoneditor/blob/master/LICENSE)# v-jsoneditor
> Vue JSONEditor
## Try the demo
https://yansenlei.github.io/VJsoneditor/

## 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
```