arrays - 对象数组中的 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")
它也不起作用
解决方案
推荐阅读
- c# - 如何设置 WPF 按钮的文本
- r - 渲染大型瓦片数据集
- codeigniter-3 - 有什么办法可以清除缓存并在codeigniter中查看
- javascript - 点击事件大部分时间都不起作用
- linux - 如何在ansible中使用yum模块禁用所有存储库?
- java - 使用 java s3 sdk 列出存储桶(拥有并且我被授予访问权限)
- corda - 带有 corda-node-driver 的 Cordapp 配置文件
- python - ipaddress 没有正确标记 192.0.0.0/24 中的保留 IP?
- c# - 什么是服务,为什么要在 ASP.NET Core 中添加它们?
- php - 重置密码时 RouteCollection.php 第 251 行中的 MethodNotAllowedHttpException