Conditionally rendering v-for list based on array attribute? - vuejs2

Question

I am looping through an array and conditionally rendering a list like so:
<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>
Here's a a condensed version of the list array:
[ {
"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."
}
]
This renders the list like so...but notice how some items have their headings printed twice (e.g., External Entity Indentifier).
Is there a way to only print this item's table heading (again, in this case 'External Entity Identifier') once but display an ordered list containing the respective External Entity Identifier description?
Something like this is what I am aiming for:

Answer 1

One solution:
Use computed property to convert your data to one object, its format will be like {'Overhead Clearance':[{...}], 'Vertical Clearance Open':[{...}], 'External Entity Identifier':[{...}]}.
uses v-for to loop this object (or you can use v-for="(item index) in Object.entries(computedItem)"
If item.length ===0 ,use <ul>, if item.length > 0, use <ol>
for item.length > 0, uses another v-for to generate all <li>
Below is one demo:
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>