Awesome Open Source
Awesome Open Source
Sponsorship

Vue-Json-Edit

Visual JSON Editor built as an vue component. Provides a basic GUI

DEMO

Getting Started

npm install vue-json-edit --save

Usage

//import it in your project At your entry point

import Vue from 'vue'
import JsonEditor from 'vue-json-edit'
  
Vue.use(JsonEditor)

Props

  • objData: json data
  • options
    • confirmText: strings of the confirm button
    • cancelText: strings of the cancel button

Example

Single file component

<template>
    <JsonEditor
        :options="{
            confirmText: 'confirm',
            cancelText: 'cancel',
        }"
        :objData="jsonData" 
        v-model="jsonData" >
    </JsonEditor>
</template>
<script>
export default {
    ...
    data: function() {
        return {
            jsonData: {
                name: 'mike',
                age: 23,
                phone: '18552129932',
                address: ['AAA C1', 'BBB C2']
            }
        }
    }
}
</script> 

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
vue (3,695
json (1,069
vue-components (183
json-schema (128

Find Open Source By Browsing 7,000 Topics Across 59 Categories