我正在使用 vue.js 庫(kù)進(jìn)行前端開發(fā)。我遇到過一個(gè)場(chǎng)景，我的 JavaScript 方法返回一個(gè)列表，其中包含對(duì)象，對(duì)象的屬性數(shù)量每次在方法執(zhí)行后都會(huì)發(fā)生變化。例如，我的列表可以在 2 個(gè)不同的執(zhí)行中包含這些類型的對(duì)象。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
}由于屬性名稱是動(dòng)態(tài)變化的，有什么方法可以綁定到 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>有沒有辦法將這些類型的對(duì)象綁定到 vue.js 中的 fronted ？
3 回答
元芳怎么了
TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊
您需要再次循環(huán)該項(xiàng)目的鍵。這將顯示對(duì)象中的所有值
<tbody>
<tr v-for="item in Result.Data ">
<td v-for="(value, key, index) in item">
{{value}}
</td>
</tr>
</tbody>
如果您想過濾其中一些，例如檢查鍵是否是有效日期，您需要添加 av-if并使用Date.parse來(lái)檢查這一點(diǎn)。
<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>
波斯汪
TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個(gè)贊
如果你想顯示所有 attr-> 你可以使用這個(gè)：
<ul v-for="item in Result ">
<li v-for="(value,key,index) in item">{{value}}</li>
</ul>
如果你想整天展示你可以使用 v-if 和計(jì)算來(lái)完成你自己的填充
<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>
明月笑刀無(wú)情
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊
經(jīng)過一些研究和你的一些建議后，我找到了答案。
?<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;
但這段代碼只在第一次有效。第二次數(shù)據(jù)沒有更新。所以我將 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 不允許向已創(chuàng)建的實(shí)例動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性。
- 3 回答
- 0 關(guān)注
- 246 瀏覽
添加回答
舉報(bào)
0/150
提交
取消