Вывод сложного объекта через v-for

162

09 июня 2018, 21:30

Есть объект core_object.language_code такого вида

           {
            a: {
                af:"Afrikaans"
                am:"Amharic"
                ar:"Arabic"
                az:"Azerbaijani"
                hy:"Armenian"
                sq:"Albanian"
               },
            b: {
                ba:"Bashkir"
                be:"Belarusian"
                bg:"Bulgarian"
                bn:"Bengali"
                bs:"Bosnian"
                eu:"Basque"
                my:"Burmese"
               }
               //И так далее
    }

И есть список:

            <ul class="lang_sort" id="alphabet_a"></ul>
            <ul class="lang_sort" id="alphabet_b"></ul>
            <ul class="lang_sort" id="alphabet_c"></ul>
            <ul class="lang_sort" id="alphabet_d"></ul>
            <ul class="lang_sort" id="alphabet_e"></ul>
            <ul class="lang_sort" id="alphabet_f"></ul>
            <ul class="lang_sort" id="alphabet_g"></ul>
            <ul class="lang_sort" id="alphabet_h"></ul>
            <ul class="lang_sort" id="alphabet_i"></ul>
            <ul class="lang_sort" id="alphabet_j"></ul>
            <ul class="lang_sort" id="alphabet_k"></ul>
            <ul class="lang_sort" id="alphabet_l"></ul>
            <ul class="lang_sort" id="alphabet_m"></ul>
            <ul class="lang_sort" id="alphabet_n"></ul>
            <ul class="lang_sort" id="alphabet_o"></ul>
            <ul class="lang_sort" id="alphabet_p"></ul>
            <ul class="lang_sort" id="alphabet_q"></ul>
            <ul class="lang_sort" id="alphabet_r"></ul>
            <ul class="lang_sort" id="alphabet_s"></ul>
            <ul class="lang_sort" id="alphabet_t"></ul>
            <ul class="lang_sort" id="alphabet_u"></ul>
            <ul class="lang_sort" id="alphabet_v"></ul>
            <ul class="lang_sort" id="alphabet_w"></ul>
            <ul class="lang_sort" id="alphabet_x"></ul>
            <ul class="lang_sort" id="alphabet_y"></ul>
            <ul class="lang_sort" id="alphabet_z"></ul>

Как одним (желательно) компонентом через v-for вывести языки в соответствующие буквам списки?

Answer 1

new Vue({ 
  el: "#app", 
  data: function() { 
    return { 
      core_object: { 
        language_code: { 
          a: { 
            af: "Afrikaans", 
            am: "Amharic", 
            ar: "Arabic", 
            az: "Azerbaijani", 
            hy: "Armenian", 
            sq: "Albanian" 
          }, 
          b: { 
            ba: "Bashkir", 
            be: "Belarusian", 
            bg: "Bulgarian", 
            bn: "Bengali", 
            bs: "Bosnian", 
            eu: "Basque", 
            my: "Burmese", 
          } 
        } 
      } 
    } 
  } 
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> 
<div id="app"> 
  <ul v-for="level1, key1 in core_object.language_code" class="lang_sort" :id="'alphabet_' + key1"> 
    <li v-for="level2, key2 in level1" :id="key2">{{level2}}</li> 
  </ul> 
</div>