Vuejs 如何根据 JSON 数据渲染表格

Question

我有这个JSON-array，它看起来像这样：

"data": {
   "cells": [
    [
     {
      "rowIndex": 0,
      "columnIndex": 0,
      "value": "<p>This is some value</p>",
      "type": "th",
      "scope": "col"
     },
     {
      "rowIndex": 0,
      "columnIndex": 1,
      "value": "<p>Another value</p>",
      "type": "th",
      "scope": "col"
     }
    ],
    [
     {
      "rowIndex": 1,
      "columnIndex": 0,
      "value": "<p>Blabla blabla</p>",
      "type": "td",
      "scope": null
     },
     {
      "rowIndex": 1,
      "columnIndex": 1,
      "value": "<p>Lorem ipsum</p>",
      "type": "td",
      "scope": null
     }
    ]
   ],
 }

现在我想在我的vuejs-app 的表格中呈现这些数据，所以我尝试这样做：

首先通过计算值获取数据：

computed: {
    tableData() {
        return this.content.data.cells;
    },
},

然后通过表格渲染数据：

<table>
    <tr v-for="cell in tableData" :key="cell.id">
        <template v-if="cell.type === 'th'">
            <th v-for="header in cell" :key="header">
                {{ header.value }}
            </th>
        </template>
        <template v-if="cell.type === 'td'">
            <td v-for="celldata in cell" :key="celldata">
                {{ celldata.value }}
            </td>
        </template>
    </tr>
</table>

但这什么也没显示，字段只是空的。我做错了什么？

Answer 1

1. 鉴于cells 数组的每一行包含一个数组，您必须使用row[0].type 测试行类型
2. 单元格内容是html，所以使用插值{{ }}是不够的——你需要使用v-html
3. 您正在使用:key="cell.id"，但我在数据本身中没有看到任何id 字段...
4. 您可以通过使用特殊的 Vue is 属性来简化模板并消除重复

const data = {
  "cells": [
    [{
        "rowIndex": 0,
        "columnIndex": 0,
        "value": "<p>This is some value</p>",
        "type": "th",
        "scope": "col"
      },
      {
        "rowIndex": 0,
        "columnIndex": 1,
        "value": "<p>Another value</p>",
        "type": "th",
        "scope": "col"
      }
    ],
    [{
        "rowIndex": 1,
        "columnIndex": 0,
        "value": "<p>Blabla blabla</p>",
        "type": "td",
        "scope": null
      },
      {
        "rowIndex": 1,
        "columnIndex": 1,
        "value": "<p>Lorem ipsum</p>",
        "type": "td",
        "scope": null
      }
    ]
  ],
}

const vm = new Vue({
  el: "#app",
  data() {
    return {
      data
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

<div id="app">
  <table class="table is-bordered">
    <tr v-for="(row, idx) in data.cells" :key="idx">
      <th v-for="cell in row" :is="cell.type" :key="`r${idx}_c${cell.columnIndex}`" v-html="cell.value">
      </th>
    </tr>
  </table>
</div>

Answer 2

您正在处理 JSON 数据。您确实需要先使用 JSON.parse() 方法将 json 解析回 javascript 数据类型。

您可以在 mdn 上阅读此内容