Vue.js Render Object as Table in Beautiful Way

In Vue.js we can use v-for to render Array as HTML Table or List beautifully, but If we want render Object key and value as Table, for example, I use JS Object and Array to store many Contact info, each Contact have different key, I want display Contact 1 info in a table, It seems v-for not good at here?

For Example, I want convert JS Object to HTML like below:

{
  "name": "Karl",
  "age": 10,
  "school": "NTUST"
}

HTML:

<p>name:Karl</p>
<p>age:10l</p>
<p>school:NTUST </p>

At the first time, I try to use Object.keys and v-for to solve this situation but It is very dirty I think, and then I found a good syntax can solve it:

<p v-for="(val, key) in contacts[0]">{{key}}:{{val}}</p>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料