How to access JSON object values using vue steps? - php

Question

This is step 1. These are the input boxes i want to type. This is the function I created to point each value to input boxes:
getmyEditor: function(){
this.chartType = this.options.chart.type;
this.backgroundColor = this.options.chart.backgroundColor;
this.borderColor = this.options.chart.borderColor;
this.borderWidth = this.options.chart.borderWidth;
this.height = this.options.chart.height;
this.options.xAxis.plotLines = [{
value: this.xPlotLinesvalue,
label: {
text: this.xPlotLinesText,
align: 'center',
style: {
color: 'gray'
}
}}];
Above code i created to access object values. how to apply this values added
text boxes?
{"chart": {
"type": "pie",
"backgroundColor": "#FFFFFF",
"borderColor": "#000",
"borderWidth": 0,
"height": 300,
"inverted": false,
"plotBackgroundColor": "#FFFFFF",
"plotBorderColor": "#FFFFFF",
"plotBorderWidth": 1,
"style": {
"fontFamily": "Open Sans"
},
"polar": ""
},
"title": {
"text": "Title",
"x": -20
},
"table": {
"text": ""
},
"xAxis": {
"max": null,
"categories": [],
"title": {
"text": ""
},
"plotLines": [
{
"value": 0,
"width": 0,
"color": "red",
"label": {
"text": "",
"align": "center",
"style": {
"color": "gray"
}
}
}
]
},
"yAxis": {
"title": {
"text": ""
},
"categories": [],
"min": null,
"max": null,
"plotLines": [
{
"value": 0,
"width": 0,
"color": "red",
"label": {
"text": "",
"align": "center",
"style": {
"color": "gray"
}
}
}
]
},
"zAxis": "",
"tooltip": {
"valueDecimals": 0,
"valuePrefix": "",
"valueSuffix": "",
"padding": 8
},
"legend": {
"enabled": true,
"layout": "vertical",
"align": "right",
"verticalAlign": "middle",
"borderWidth": 0
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"color": "#582b6e",
"stacking": "",
"point": {
"events": {}
}
},
"scatter": {
"marker": {
"radius": 4,
"states": {
"hover": {
"enabled": true,
"lineColor": "rgb(100,100,100)"
}
}
},
"states": {
"hover": {
"marker": {
"enabled": false
}
}
},
"tooltip": {
"headerFormat": "<b>{series.name}</b><br>",
"pointFormat": "{point.x} , {point.y} ",
"x_unit": "",
"y_unit": ""
}
}
},
"series": [
{
"name": "Brands",
"colorByPoint": true,
"data": [
{
"name": "IE",
"y": 56.33
},
{
"name": "Chrome",
"y": 24.03,
"sliced": true,
"selected": true
},
{
"name": "Firefox",
"y": 10.38
},
{
"name": "Safari",
"y": 4.77
},
{
"name": "Opera",
"y": 0.91
},
{
"name": "Other",
"y": 0.2
}
]
}
],
"lang": {
"noData": "NO DATA AVAILABLE!"
},
"noData": {
"style": {
"fontWeight": "bold",
"fontSize": "15px",
"color": "#303030"
}
}
}
I'm trying to access (point to text boxes) this object using vue, but it's not working yet. How to do that correctly? I point each object value using this vue function inside method.
This is i want final output: This object view inside textarea if i change text area object value then that value will going to above input boxes.