vue-jsoneditor

Vue implementation of JSONEditor

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-jsoneditor
1.0.136 years ago6 years agoMinified + gzip package size for vue-jsoneditor in KB

Readme

NPM version Build Status codecov codebeat badge
vue-jsoneditor
Vue implementation of JSONEditor

Installation

# npm
npm install vue-jsoneditor

Using

Import globally

import Vue from 'vue';
import VJsoneditor from 'vue-jsoneditor';
import App from './App';

Vue.config.productionTip = false;
Vue.use(VJsoneditor);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
});

Import locally

import VJsoneditor from 'vue-jsoneditor';

export default {
  name: 'app',
  components: {
    VJsoneditor,
  },
  data() {
    return {
      json: {
        sucess: true,
      },
    };
  },
  methods: {
    jsonChanged(value) {
      console.log(JSON.stringify(value));
    },
  },
};

Use in template

<template>
  <div id="app">
    <v-jsoneditor v-model="json"
                  @input="jsonChanged">
    </v-jsoneditor>
  </div>
</template>

Include jsoneditor api

Don't forget to include jsoneditor API:
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.14.0/jsoneditor.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.14.0/jsoneditor.min.js"></script>