我正在使用 vue.js 庫進行前端開發。我遇到過一個場景，我的 JavaScript 方法返回一個列表，其中包含對象，對象的屬性數量每次在方法執行后都會發生變化。例如，我的列表可以在 2 個不同的執行中包含這些類型的對象。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 ？
3 回答
元芳怎么了
TA貢獻1798條經驗 獲得超7個贊
您需要再次循環該項目的鍵。這將顯示對象中的所有值
<tbody>
<tr v-for="item in Result.Data ">
<td v-for="(value, key, index) in item">
{{value}}
</td>
</tr>
</tbody>
如果您想過濾其中一些，例如檢查鍵是否是有效日期，您需要添加 av-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>
波斯汪
TA貢獻1811條經驗 獲得超4個贊
如果你想顯示所有 attr-> 你可以使用這個：
<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>
明月笑刀無情
TA貢獻1828條經驗 獲得超4個贊
經過一些研究和你的一些建議后，我找到了答案。
?<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 不允許向已創建的實例動態添加新的根級響應式屬性。
- 3 回答
- 0 關注
- 231 瀏覽
添加回答
舉報
0/150
提交
取消