首页 > 解决方案 > 对象数组中的 v-for 问题

问题描述

我需要帮助,因为我不明白这一点。我有这个 vue 模型:

  new Vue ({
    el: '#tablaRU',
    data: {
        search: '',
        datos: datosDefinitivos,
        datosComputed: [], 
        ascending: false
    },
    computed: {
        filteredList(){         

            this.datosComputed = this.datos;
            if (this.search != ''){


                return this.datosComputed;
            }else{

                return this.datosComputed;
            }
            return this.datosComputed;
        }//filteredList

    }//computed
  }

datosDefinitivos 是这样的:

datosDefinitivos = { ['index1']= {Family ='Family1', 
                                   datosFamily = {[subFamily1] = 
                                       {subF =   "subF1", {table of numbers}},
                                       [subFamily2] =  {subF =   "subF2", {table of numbers}}, 'columnas' = {array of numbers}
                                       ......

                                       [subFamilyn] = ...} ,
             ['index2] = -- family2  data --}

这个 html 用于打印数组数据:

 <div id="tablaRU" class="col s12" style="display: block;">
    <h5>Tabla RU'S</h5>     
    <ul v-for="fam in filteredList" class="collapsible popout">                                 
       <li class="li-hover" :id="'familiaRU_'+normalize(fam.Familia)">
          <div class="collapsible-header grey white-text active" :id="'familiaRU-'+normalize(fam.Familia)"><i class="mdi-file-folder-open"></i>{{fam.Familia}}</div>
            <div style="margin-left: 5px;" class="collapsible-body recent-activity">
                <ul v-for="sub in fam.datosFamilia" class="collapsible popout">
                    <li class="li-hover" :id="'subFamiliaRU_'+normalize(sub.Subfamilia)">
                        <div class="collapsible-header grey white-text active" :id="'subFamiliaRU-'+normalize(sub.Subfamilia)"><i class="mdi-file-folder-open"></i>{{sub.Subfamilia}}</div>
                        <div class="collapsible-body recent-activity">
                            <table class = "responsive-table striped">
                                <thead><tr><th v-for="(col,indexC) in sub.columnas" :key="indexC">{{col}}</th></tr></thead>
                                <tbody>
                                    <tr v-for="(valor,indexV) in sub.datosSubfamilia" :key="indexV">
                                        <td v-for="(row,indexR) in valor" :key="indexR">{{row}}</td>
                                </tr>
                            </tbody>

                        </table></div></li>

                    </ul>
                </div></li>
            </ul>
        </div><!--  de pintar tabla -->

问题是,如果我用数字索引绘制一个数组,它会很好地绘制它,但如果我更改字符串的索引,它不会。你能帮助我吗?

添加:我已经尝试过:v-for="(fam,index) in filteredList :key="index")它也不起作用

标签: arraysobjectvue.jsvuejs2

解决方案


推荐阅读