首页 > 解决方案 > 如何使用 vue 步骤访问 JSON 对象值?

问题描述

这是第 1 步。这些是我要输入的输入框。这是我创建的将每个值指向输入框的函数:

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"
  }
}
}

我正在尝试使用 vue 访问(指向文本框)这个对象,但它还没有工作。如何正确地做到这一点?我在方法内部使用这个 vue 函数来指向每个对象值。

这是我想要的最终输出:如果我更改文本区域对象值,则该对象视图在文本区域内,然后该值将转到输入框上方。

标签: phpcodeignitervue.js

解决方案


推荐阅读