Условно рендеринг списка v-for на основе атрибута массива?

Question

Я перебираю массив и условно отображаю список следующим образом:

<tr v-for='item in list' v-if='item.sequencenumber == 0' :key='item.id'>
                  <th>{{item.p_propertyalphacode}}</th>
                    <td>
                      <ul>
                        <li>
                          {{item['External Entity Identifier']}}
                        </li>
                      </ul>
                    </td>
  </tr>
<tr v-for='item in list' v-if='item.sequencenumber > 0' :key='item.id'>
                  <th>{{item.p_propertyalphacode}}</th>
                    <td>
                      <ol>
                        <li>
                          {{item['External Entity Identifier']}}
                        </li>
                      </ol>
                    </td>
                </tr>

Вот сокращенная версия массива list:

[  {
    "id": 100199,
    "name": "Cable",
    "sequencenumber": 0,
    "p_propertyalphacode": "Overhead Clearance                                                                                                                                    ",
    "External Entity Identifier": "If the overhead obstruction does not cross a navigable waterbody, then 'Waterbody Overhead Obstruction' (OWO) does not apply and 'Vertical Clearance, Safe' (VCS) and/or 'Vertical Clearance, Open' (VCO) should not be measured for maritime-specific purposes. Instead, both 'Overhead Clearance' (OHC) and 'Underbridge Clearance' (UBC) should be measured for non-maritime purposes."
  },
  {
    "id": 100199,
    "name": "Cable",
    "sequencenumber": 0,
    "p_propertyalphacode": "Vertical Clearance Open                                                                                                                               ",
    "External Entity Identifier": "If the overhead obstruction crosses a navigable waterbody, then 'Waterbody Overhead Obstruction' (OWO) applies and 'Vertical Clearance, Safe' (VCS) and/or 'Vertical Clearance, Open' (VCO) should be measured for maritime-specific purposes."
  },
  {
    "id": 100199,
    "name": "Cable",
    "sequencenumber": 1,
    "p_propertyalphacode": "External Entity Identifier                                                                                                                            ",
    "External Entity Identifier": "When there is known to be a corresponding entry in the Vertical Obstruction database, specify the 'Codespace' of the 'External Entity Identifier' as 'Vertical Obstruction' (6) and populate the 'Code' value with the identifier of the corresponding entry."
  },
  {
    "id": 100199,
    "name": "Cable",
    "sequencenumber": 2,
    "p_propertyalphacode": "External Entity Identifier                                                                                                                            ",
    "External Entity Identifier": "When there is known to be a corresponding entry in the Basic Encyclopedia database, specify the 'Codespace' of the 'External Entity Identifier' as 'Basic Encyclopedia' (7) and populate the 'Code' value with the identifier of the corresponding entry."
  }
]

Это отображает списокнапример ... но обратите внимание, как заголовки некоторых элементов печатаются дважды (например, External Entity Indentifier).

Есть ли способ напечатать заголовок таблицы этого элемента (опять же, в данном случае «Идентификатор внешнего объекта») один раз, но отобразить упорядоченный список, содержащий соответствующий External Entity Identifierописание?

Что-то вроде этого - то, к чему я стремлюсь:

Answer 1

Одно решение:

1. Используйте вычисляемое свойство для преобразования ваших данных в один объект, его формат будет выглядеть как {'Overhead Clearance':[{...}], 'Vertical Clearance Open':[{...}], 'External Entity Identifier':[{...}]}.

2. использует v-for для зацикливания этого объекта (или вы можете использовать v-for="(item index) in Object.entries(computedItem)"

3. Если item.length ===0, используйте <ul>,если item.length > 0, используйте <ol>

4. для item.length > 0, используйте еще v-for для генерации всех <li>

нижеэто одна демоверсия :

Vue.config.productionTip = false
new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          "id": 100199,
          "name": "Cable",
          "sequencenumber": 0,
          "p_propertyalphacode": "Overhead Clearance                                                                                                                                    ",
          "External Entity Identifier": "If the overhead obstruction does not cross a navigable waterbody, then 'Waterbody Overhead Obstruction' (OWO) does not apply and 'Vertical Clearance, Safe' (VCS) and/or 'Vertical Clearance, Open' (VCO) should not be measured for maritime-specific purposes. Instead, both 'Overhead Clearance' (OHC) and 'Underbridge Clearance' (UBC) should be measured for non-maritime purposes."
        },
        {
          "id": 100199,
          "name": "Cable",
          "sequencenumber": 0,
          "p_propertyalphacode": "Vertical Clearance Open                                                                                                                               ",
          "External Entity Identifier": "If the overhead obstruction crosses a navigable waterbody, then 'Waterbody Overhead Obstruction' (OWO) applies and 'Vertical Clearance, Safe' (VCS) and/or 'Vertical Clearance, Open' (VCO) should be measured for maritime-specific purposes."
        },
        {
          "id": 100199,
          "name": "Cable",
          "sequencenumber": 1,
          "p_propertyalphacode": "External Entity Identifier                                                                                                                            ",
          "External Entity Identifier": "When there is known to be a corresponding entry in the Vertical Obstruction database, specify the 'Codespace' of the 'External Entity Identifier' as 'Vertical Obstruction' (6) and populate the 'Code' value with the identifier of the corresponding entry."
        },
        {
          "id": 100199,
          "name": "Cable",
          "sequencenumber": 2,
          "p_propertyalphacode": "External Entity Identifier                                                                                                                            ",
          "External Entity Identifier": "When there is known to be a corresponding entry in the Basic Encyclopedia database, specify the 'Codespace' of the 'External Entity Identifier' as 'Basic Encyclopedia' (7) and populate the 'Code' value with the identifier of the corresponding entry."
        }
      ]
    }
  },
  computed: {
    computedItems: function() {
      return this.items.sort((a, b) => {
        return a.sequencenumber - b.sequencenumber
      }).reduce((pre, cur) => {
        if (cur.p_propertyalphacode in pre) {
          pre[cur.p_propertyalphacode].push(cur)
        } else {
          pre[cur.p_propertyalphacode] = [cur]
        }
        return pre
      }, {})
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <table>
    <template v-for='(item, index) in computedItems'>
    <tr v-if='item.length === 1' :key="index+'a'+item.id">
      <th>{{item[0].p_propertyalphacode}}</th>
      <td>
        <ul>
          <li>
            {{item[0]['External Entity Identifier']}}
          </li>
        </ul>
      </td>
    </tr>
    <tr v-else :key="index+'b'+item.id">
      <th>{{item[0].p_propertyalphacode}}</th>
      <td>
        <ol>
          <li v-for="(cell, index) in item" :key="index">
            {{cell['External Entity Identifier']}}
          </li>
        </ol>
      </td>
    </tr>
    </template>
  </table>
</div>