我在 vue.js 中遇到问题。
我想在具有 xml 数据的服务器程序上创 build 置页面。
我认为,如果按如下方式完成,就会起作用:
- 服务器 |将 xml 解析为 json
- 客户 |获取json并读取json
- 客户 |编辑json
- 客户 |将 json 推送到服务器
- 服务器 |将 json 解析为 xml
- 服务器 |保存 XML
但是我无法读取json,因为收到的json数据有'@'。
"?xml": {
"@version": "1.0",
"@encoding": "utf-8"
},
"Nodes": {
"Node": [
{
"@type": "development",
- - - -
我无法读取脚本中的@type 属性..
//脚本
<script>
var node = new Vue({
el: '#Nodes',
data: {
json: null
},
filters: {
checkNum: function(value) {
var result = value;
if (value < 10) {
var result = "0" + value;
}
return result;
},
}
})
$(document).ready(function(){
console.log("ready");
getNodes();
setTimeInterval();
});
function getNodes() {
var $url ="http://localhost:21004/nodes/current/get/json"
$.ajax({
url: $url,
type: 'get',
success: function (data) {
console.log(data);
console.log(data.Nodes[0].type);
node.json = data;
},
error: function(err) {
console.log(err);
}
})
}
function setTimeInterval () {
setInterval(function() {
getNodes();
},3000)
}
</script>
//HTML
<ul id="Nodes">
<li v-for="node in json.Nodes">
{{ node.@type }}
{{ node.@group }}
{{ node.@name }}
<li v-for="item in node.Items">
{{ node.@name }}
{{ node.@defaultValue }}
{{ node.@expression }}
{{ node.@format }}
</li>
</li>
</ul>
感谢阅读。
最佳答案
我不太擅长vue。但从你的代码我可以说你对对象有问题。如果值名称是无效的 JavaScript 变量名称,则无法使用点符号访问值。像这样使用它。
<ul id="Nodes">
<li v-for="node in json.Nodes">
{{ node['@type'] }}
{{ node['@group'] }}
{{ node['@name'] }}
<li v-for="item in node.Items">
{{ item['@name'] }}
{{ item['@defaultValue'] }}
{{ item.['@expression'] }}
{{ item.['@format'] }}
</li>
</li>
</ul>
关于javascript - 如何在vue.js中解析json?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48593737/