Question

我需要用Vue创建一个表，数据来自JSON。我不知道如何为td表标签设置“ Jogosultsagok”两个“ Nev”值。

我尝试了row.Jogosultsagok [0] .Nev格式，但这不起作用，为此我写下了代码部分和最终错误。

HTML

<tbody>
  <tr v-for="row in get_rows()">
    <td>{{row.Id}}</td>
    <td>{{row.Nev}}</td>
    <td>{{row.Jogosultsagok[0].Nev}}</td>
    <td>{{row.Jogosultsagok[1].Nev}}</td>
  </tr>
</tbody>

Vue

data: {
  rows:[]
},
created:function() {
  fetch('https://api.myjson.com/bins/7jr55')
    .then(res => res.json())
    .then(res => {
    this.rows = res;
  })
},
methods: {
  "get_rows": function get_rows() {
    var start = (this.currentPage-1) * this.elementsPerPage;
    var end = start + this.elementsPerPage;
    return this.rows.slice(start, end);
  },
},

JSON

[
  {
    "Id": 1,
    "Nev": "László",
    "Jogosultsagok": [
      {
        "Id": 1,
        "Nev": "Módosítás"
      },
      {
        "Id": 2,
        "Nev": "Olvasás"
      }
    ],
    "Eletkor": 25,
    "Regisztralt": "2019-01-31 06:45:51.557Z",
    "Munkahely": {
      "Id": 12,
      "Nev": "Cég 1"
    }
  },
  {
    "Id": 2,
    "Nev": "Péter",
    "Jogosultsagok": [
      {
        "Id": 2,
        "Nev": "Olvasás"
      }
    ],
    "Eletkor": 44,
    "Regisztralt": "2011-01-31 09:23:51.234Z",
    "Munkahely": {
      "Id": 34,
      "Nev": "Cég 2"
    }
  },
...

我收到此错误：TypeError：无法读取未定义的属性“ Nev”

Answer 1

发生此问题是因为JSON响应不一致： row.Jogosultsagok[1]并不总是定义为嵌套数组有时仅包含一个元素。

如果值丢失，可以通过将表格单元格留空来解决错误：

<template>
  <tbody>
    <tr v-for="row in get_rows()">
      <td>{{row.Id}}</td>
      <td>{{row.Nev}}</td>
      <td>{{row.Jogosultsagok[0].Nev}}</td>
      <td v-if="row.Jogosultsagok[1]">{{row.Jogosultsagok[1].Nev}}</td>
      <td v-else></td>
    </tr>
  </tbody>
</template>

如何使用VueJs将嵌套的JSON提取到表中？

1 个答案: