使用组件
标签
<div class="editor-container">
<json-editor ref="jsonEditor" v-model="value" />
</div>
style
.editor-container{
position: relative;
height: 100%;
}
script
import JsonEditor from '@/components/JsonEditor'
const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
export default {
name: 'JsonEditorDemo',
components: { JsonEditor },
data() {
return {
value: JSON.parse(jsonData)
}
}
}
遇到的问题
编辑回显
this.temp.paramJson = JSON.parse(this.temp.paramJson)
编辑提交需要额外处理,根据是否是json处理,不是json不需要转string
if (this.temp.paramJson.size === undefined) {
tempData.paramJson = this.temp.paramJson
} else {
tempData.paramJson = JSON.stringify(this.temp.paramJson)
}
注 : 以上为传递后端使用string时使用,页面刷新第一次回显是json,后续都不是json了