Как зациклить список объектов в таблице с пользовательской строкой, используя Vue.js - PullRequest
Новая
       20

Как зациклить список объектов в таблице с пользовательской строкой, используя Vue.js

0 голосов
/ 31 марта 2019

В настоящее время я разрабатываю новое приложение, используя Vue.js.У меня есть список объектов, которые я беру из своей базы данных: 

list =  [ 
        { "main": "main 1", "sub_main": "sub main 1", "title": "testing", "description": "this is description" },
    { "main": "main 1", "sub_main": "sub main 1", "title": "trying", "description": "this is description 2" }, 
    { "main": "main 1", "sub_main": "sub main 2", "title": "testing again", "description": "this is description" },
    { "main": "main 1", "sub_main": "sub main 2", "title": "still trying", "description": "this is description 2" },
    { "main": "main 2", "sub_main": "sub main 1", "title": "testing another", "description": "this is description" },
    { "main": "main 2", "sub_main": "sub main 2", "title": "i need help", "description": "this is description 2" }
    ]

Я хочу зациклить его с помощью v-for в таблице, но мне нужно настроить его, чтобы он выглядел следующим образом 

+---------------------+-----------------------+
| Main/Sub Main/Title | Description           |
+---------------------+-----------------------+
|        main 1       |                       |
+---------------------+-----------------------+
|      sub main 1     |                       |
+---------------------+-----------------------+
|       testing       | this is description   |
+---------------------+-----------------------+
|        trying       | this is description 2 |
+---------------------+-----------------------+
|      sub main 2     |                       |
+---------------------+-----------------------+
|    testing again    | this is description   |
+---------------------+-----------------------+
|     still trying    | this is description 2 |
+---------------------+-----------------------+
|        main 2       |                       |
+---------------------+-----------------------+
|      sub main 1     |                       |
+---------------------+-----------------------+
|   testing another   | this is description   |
+---------------------+-----------------------+
|      sub main 2     |                       |
+---------------------+-----------------------+
|     i need help     | this is description 2 |
+---------------------+-----------------------+

В настоящее время мне просто удается сделать каждую запись в одном ряду 

 <tr v-for="(data) in list" > 
<td>{{data.main}}</td>
<td>{{data.sub_main}}</td>
<td>{{data.title}}</td>
</tr>

Не могли бы вы, ребята, дать мне указатель о том, как решить эту проблему?

1 Ответ

0 голосов
/ 31 марта 2019

сначала вам нужно преобразовать ваш тип данных в подходящий тип для цикла.Я преобразую ваши данные в вычисленные значения следующим образом: 


// computed function

computed: {
    sortedList() {
      const sortedList = this.list.reduce((result, item) => {
        const { main, sub_main, title, description } = item;

        // check main exists, example: main 1
        if (!result[main]) {
          result[main] = {};
        }

        // check sub_main exsts, example: sub main 1
        if (!result[main][sub_main]) {
          result[main][sub_main] = [
            {
              title,
              description
            }
          ];
        }

        // if exists, add other data
        result[main][sub_main] = [
          ...result[main][sub_main],
          { title, description }
        ];

        return result;
      }, {});
      return Object.entries(sortedList);
    }
  }


// result
{
  'main 1':  
  {
    'sub main 1': [
        { title: 'testing', description: 'this is description' }, 
        { title: 'testing', description: 'this is description' }, 
        { title: 'trying', description: 'this is description 2' }
    ], 
    'sub main 2': [
        { title: 'testing again', description: 'this is description' }, 
        { title: 'testing again', description: 'this is description' }, 
        { title: 'still trying', description: 'this is description 2' }
    }, 
  'main 2': { ... }
} 

, затем я делаю циклический тройной v-for в списке, который я отсортировал. 


<template>
  <div id="app">
    <div class="wrapper" v-for="([mainKey, mainValue], index) in sortedList" :key="index">
      <tr>
        <td>{{mainKey}}</td>
      </tr>
      <template v-for="([submainKey, submainValue], index) in Object.entries(mainValue)">
        <tr :key="index">
          <td>{{submainKey}}</td>
        </tr>
        <tr v-for="({title, description}, index) in submainValue" :key="index">
          <td>{{title}}</td>
          <td>{{description}}</td>
        </tr>
      </template>
    </div>
  </div>
</template>

Скриншот результата:

результат screeshot

Код и поле приведены ниже:

https://codesandbox.io/s/64o1p6xv4r

Надеюсь, я смогу решить вашу проблему!

...