如何将一个对象绑定到Vue.js中的HTML表，其中它的属性是动态创建的

Question

我正在使用vue.js库进行前端开发。

我遇到了一个交叉场景，我的JavaScript方法返回一个列表，其中有对象，对象的属性数量可以在方法执行后每次更改。

例如，我的列表可以在两个不同的执行中包含这些类型的对象
var obj = { Name : "John", 2020-Jan: 1, 2020-Jul: 2 }

var obj = { Name: "John", 2020-Jan: 1, 2020-Jul: 2, 2021-Jan: 3, 2021-Jul: 4 }

既然属性名称是动态更改的，有什么方法可以绑定到HTML吗？

<div >
<table>
<thead>
<tr>
<th v-for ="row in Result.Headers">
{{row}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in Result.Data ">
<td>
{{item.2020-Jan}}       // Because don't know the number of properties until run time
</td>                   // No of <td/>'s can change on no of properties. 
<td>                   // exactly don't know how many <td>'s needed there.
{{item.2020-Jul}}
</td> <td>
{{item.2021-Jan}}
</td>
</tr>
</tbody>
</table>
</div>

有没有办法将这些类型的对象绑定到vue.js中的fronted？

Answer 1

您需要再次循环项目的键。这将显示对象中的所有值

<tbody>
<tr v-for="item in Result.Data ">
<td v-for="(value, key, index) in item">
{{value}}
</td>  
</tr>
</tbody>

如果你想过滤其中的一些，例如，检查键是否是有效的日期，你需要添加一个v-if，并使用Date.parse进行检查。

<tbody>
<tr v-for="item in Result.Data ">
<td v-for="(value, key, index) in item" v-if="Date.parse(key) !== NaN">
{{value}}
</td>  
</tr>
</tbody>

Answer 2

如果你想显示所有属性，你可以使用这个：

<ul v-for="item in Result ">
<li v-for="(value,key,index) in item">{{value}}</li>
</ul>

如果你想整天都展示，你可以使用v-if和计算来完成你自己的填充

<div id="app">
<ul v-for="item in Result" >
<li v-for="(value,key,index) in item" v-if="canShow(key)"> index：{{index}}------ key: {{key}} ------ value：{{value}} </li>
</ul>
</div>
<script>
var  vue=new Vue({
el:'#app',
data:{
Result:[{
name: 'SkyManss',
2020-Jan: 1,
2020-Jul: 2
},{
name: 'SkyManss2',
2020-Jan: 1,
2020-Jul: 2,
2021-Jan: 3,
2021-Jul: 4
}]
},
computed:{
canShow(){
return function(skey){
return skey.indexOf('-') > -1;         
}     
}
}   
});
</script>

Answer 3

经过一些研究和您的一些建议，我得出了答案。

<div>
<table>
<thead>
<tr>
<th v-for ="row in Result.Headers">
{{row}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in  Result.Data ">
<td v-for="row in Result.Headers">
{{item[row]}}
</td>
</tr>
</tbody>
</table>
</div>

Javascript代码

this.Result.Headers =  Object.keys(result.data[0]);
this.Result.Data    =  result.data;

但这段代码只是第一次起作用。第二次数据没有更新。所以我将JavaScript代码更新为以下代码。

Vue.set(self.Result, 'Headers', []);
Vue.set(self.Result, 'Result', []);
this.Result.Headers =  Object.keys(result.data[0]);
this.Result.Data    =  result.data;

Vue不允许在已创建的实例中动态添加新的根级响应属性。这是我从下面的帖子中了解到的。

vue.js在更新数组后没有更新DOM

谢谢大家！！！