vue-json-editable
vue-json-editable
Visual JSON Editor built as an vue component. Provides a basic GUI
开始
npm install vue-json-editable --save
使用
//import it in your project At your entry point
import Vue from 'vue'
import JsonEditor from 'vue-json-editable'
Vue.use(JsonEditor)
参数
- objData: json data
- options
- confirmText: strings of the confirm button
- cancelText: strings of the cancel button
- event
- key click event
- value click event
- blur click event
样例
<template>
<JsonEditor
:options="{
confirmText: '确认',
cancelText: '取消',
}"
@keyEvent="keyEvent"
@valEvent="valEvent"
@blurEvent="blurEvent"
:objData="jsonData"
v-model="jsonData" >
</JsonEditor>
</template>
<script>
export default {
...
data: function() {
return {
jsonData: {
name: 'Bill',
age: 23,
city: 'Seattle'
}
}
}
}
</script>
Dependencies
Dependencies
babel-core: ^6.26.3babel-loader: ^7.1.5babel-plugin-transform-runtime: ^6.23.0babel-preset-es2015: ^6.24.1babel-preset-stage-0: ^6.24.1css-loader: ^2.1.0html-webpack-plugin: ^3.2.0resolve-url-loader: ^3.0.1style-loader: ^0.23.1url-loader: ^1.1.2vue-loader: ^15.7.0vue-template-compiler: ^2.6.8webpack: ^4.29.6webpack-cli: ^3.3.11webpack-dev-server: ^3.11.0