Помогите понять, как отрисовывать таблицы из JSON данных через Vue.js

Question

Написал REST приложение на Spring Boot, сейчас пробую писать для него фронтенд на Vue.js

Пример приходящих из контроллера данных:

[
  {
    "id": 11,
    "name": "Burger King",
    "address": "ул.Садовая 1",
    "meals": [
      {
        "id": 22,
        "name": "CheeseBurger set",
        "price": 400,
        "date": "2020-02-09"
      },
      {
        "id": 23,
        "name": "FishBurger set",
        "price": 500,
        "date": "2020-02-09"
      },
      {
        "id": 21,
        "name": "ChickenBurger set",
        "price": 300,
        "date": "2020-02-09"
      }
    ]
  }
]

Как должен выглядеть скрипт, отрисующий это в виде таблицы на html странице?

Answer 1

new Vue({
  el: '#app',
  data: {
    results: [{a:1,b:2},{a:3,b:4},{a:5,b:6}],
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="r in results">
    <span>a={{r.a}}</span>,
    <span>b={{r.b}}</span>
  </div>
</div>

Answer 2

Если я вас правильно понял, можно так организовать вывод в таблицу:

const vm = new Vue({
  el: "#app",
  data: () => {
    return {
      titleLang: {
        id: 'Идентификатор',
        name: "Название",
        price: "Цена",
        date: "Дата"
      },
      restdata: [{
        "id": 11,
        "name": "Burger King",
        "address": "ул.Садовая 1",
        "meals": [{
            "id": 22,
            "name": "CheeseBurger set",
            "price": 400,
            "date": "2020-02-09"
          },
          {
            "id": 23,
            "name": "FishBurger set",
            "price": 500,
            "date": "2020-02-09"
          },
          {
            "id": 21,
            "name": "ChickenBurger set",
            "price": 300,
            "date": "2020-02-09"
          }
        ]
      }]
    }
  },
  computed: {
    headers() {
      let header = [];
      if (this.restdata.length > 0 && this.restdata[0].meals.length > 0) {
        header = Object.keys(this.restdata[0].meals[0])
      }
      return header;
    }
  },
  methods: {
    currentItem(id) {
      return this.restdata[id]
    }
  }
});

table {
  border: 1px solid silver;
}

thead {
  background: #eee;
}

td {
  border-top: 1px solid silver;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table v-if="restdata.length > 0" cellspacing="0">
    <caption>{{ currentItem(0).name }} ({{ currentItem(0).address }})</caption>
    <thead>
      <tr>
        <th v-for="h in headers">{{ titleLang[h] }}</th>
      </tr>
    </thead>
    <tr v-for="(item, index) in currentItem(0).meals" :key="index">
      <template v-for="h in headers">
        <td>
          {{item[h]}}
        </td>
      </template>
    </tr>
  </table>
</div>

Answer 3

Вот пример использования Grid-компонента, который должен здесь отлично подойти.

БЛОГ НА HUSL

Помогите понять, как отрисовывать таблицы из JSON данных через Vue.js

Ответы (3 шт):