역순으로 정렬된 키를 사용하여 개체 반복

역순으로 정렬된 키를 사용하여 개체 반복

이미 솔루션을 제안하고 있기 때문에 질문 제목이 혼란스러울 수 있습니다(객체 속성에 순서가 없다는 것을 알고 있습니다). XY 문제를 일으키지 않기 위해 먼저 제 목표를 설명하겠습니다.

N개의 단어 테이블을 단어 길이에 따라 그룹화하고 (이것은) 길이별로 내림차순으로 렌더링해야 합니다. 다음과 같습니다.

Words with length 4
===================
abcd | other fields
abce | other fields 
abcf | other fields

Words with length 3
===================
abc  | other fields
abd  | other fields
abe  | other fields

Words with length 2
===================
...

그룹화 없이 API에서 단어 목록을 가져옵니다.그래서 지금 하고 있는 일은 다음과 같습니다.

let grouped = {};
// Assume words is an Array of words of multiple lengths
words.forEach(w => {
    if (typeof grouped[w.length] === 'undefined')
        grouped[w.length] = [];
    grouped[w.length].push({'word': w}); 
    // Pushing an object cause of other calculated and not rellevant fields
});

물론 제가 이걸 그릴 때grouped단어(Vue.js 사용 중)...

<WordsTable 
    v-for="(group, length) in grouped"
    :words="group"
    :word-length="length"
/>

나는 테이블 머리글에 길이가 N인 단어를 렌더링할 때 받침대를 사용합니다.

모든 것이 작동하지만 테이블은 오름차순으로 표시됩니다(또한 객체에는 순서가 없기 때문에 우연의 일치일 수도 있습니다.그래서 진짜 질문은, Vue가 내 말을 반복할 수 있는 방법을 찾을 수 있을까?grouped내림차순으로 정렬된 키를 가진 객체

주의: 특정 길이의 단어가 없을 수 있으므로Object.keys(grouped)이[3,4,7,9,10]

갱신:

코멘트 작성자는 오브젝트 대신 어레이를 사용하는 것을 권장합니다.grouped이미 시도해 봤는데, 조금 더 나을 수도 있지만 완전히 해결되지는 않는 건 사실이에요.

한다면grouped리버스할 수 있는 어레이입니다.

<WordsTable 
    v-for="(group, length) in grouped.reverse()"
    ...
/>

그러나 이 경우 인덱스가 손실되어 테이블의 헤더 제목을 렌더링하는 데 더 이상 사용할 수 없습니다.

오브젝트 키를 내림차순으로 정렬하는 계산 속성을 생성할 수 있습니다.

sortedGroupKeys() { 
    return Object.keys( group ).sort( ( a , b ) => b - a); 
}

그러면 루프할 수 있습니다.

<WordsTable 
    v-for="(key in sortedGroupKeys)"
    :words="group[ key ]"
    :word-length="key"
/>

이게 도움이 됐으면 좋겠다.

이거면 될 거야.정렬된 키 목록에 대해 반복합니다.

console.clear()

Vue.component("WordsTable",{
  props: ["words", "length"],
  template: `
    <table>
      <caption>Words of length {{length}}</caption>
      <tbody>
        <tr v-for="word in words"><td>{{word}}</td></tr>
      </tbody>
    </table>  
  `
})
new Vue({
  el: "#app",
  data:{
    words: [
      "hello", "apple", "mister", "wut", "phenomenal", "and", "vue", "four", "word"
    ]
  },
  computed:{
    grouped() {
      return this.words.reduce((groups, word) => {
        (groups[word.length] = groups[word.length] || []).push(word)
        return groups
      }, {})
    },
    sortedDesc(){
      return Object.keys(this.grouped).sort((a,b) => b - a)
    }
  }
})

caption {
 text-align: left;
 border-bottom: 1px solid black;
}

table {
  width: 10em;
  margin-bottom: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <words-table v-for="length in sortedDesc" :key="length" :words="grouped[length]" :length="length"></words-table>
</div>

언급URL : https://stackoverflow.com/questions/51263529/iterate-an-object-with-reverse-sorted-keys