我一直在尝试使用 VueJS 显示从我的 laravel 应用程序获取的 JSON 对象,该应用程序正在处理我的服务器端操作。 任何形式的帮助将不胜感激。
这是来 self 的 laravel 应用的原始 JSON 数据:
[{
"1": 1,
"2": 2,
"3": 3,
"4": 4,
"5": 5,
"6": 6,
"7": 7,
"8": 8,
"9": 9,
"10": 10,
"11": 11,
"12": 12
},
{
"1": 70000,
"2": 66524.45,
"3": 62736.11,
"4": 58606.81,
"5": 54105.88,
"6": 49199.86,
"7": 43852.3,
"8": 38023.47,
"9": 31670.03,
"10": 24744.79,
"11": 17196.27,
"12": 8968.39
},
{
"1": 3475.55,
"2": 3788.35,
"3": 4129.3,
"4": 4500.93,
"5": 4906.02,
"6": 5347.56,
"7": 5828.84,
"8": 6353.43,
"9": 6925.24,
"10": 7548.52,
"11": 8227.88,
"12": 8968.39
},
{
"1": 6300,
"2": 5987.2,
"3": 5646.25,
"4": 5274.61,
"5": 4869.53,
"6": 4427.99,
"7": 3946.71,
"8": 3422.11,
"9": 2850.3,
"10": 2227.03,
"11": 1547.66,
"12": 807.16
},
{
"1": 9775.55,
"2": 9775.55,
"3": 9775.55,
"4": 9775.55,
"5": 9775.55,
"6": 9775.55,
"7": 9775.55,
"8": 9775.55,
"9": 9775.55,
"10": 9775.55,
"11": 9775.55,
"12": 9775.55
},
{
"1": "Mar 17, 2018",
"2": "Apr 16, 2018",
"3": "May 16, 2018",
"4": "Jun 15, 2018",
"5": "Jul 15, 2018",
"6": "Aug 14, 2018",
"7": "Sep 13, 2018",
"8": "Oct 13, 2018",
"9": "Nov 12, 2018",
"10": "Dec 12, 2018",
"11": "Jan 11, 2019",
"12": "Feb 10, 2019"
},
{
"1": 66524.45,
"2": 62736.11,
"3": 58606.81,
"4": 54105.88,
"5": 49199.86,
"6": 43852.3,
"7": 38023.47,
"8": 31670.03,
"9": 24744.79,
"10": 17196.27,
"11": 8968.39,
"12": 0
}]
我的 VueJS 代码:
<template>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th> Month</th>
<th> Opening Principal</th>
<th> Principal Taken</th>
<th> Interest</th>
<th> Payment</th>
<th> Repayment Date</th>
<th> Closing Principal</th>
</tr>
</thead>
<tr v-for="loans in loans">
<td v-for="loan in loans">{{loan}}</td>
</tr>
</table>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
loans: ''
}
},
created () {
this.$http.get('http://localhost:9000/api/loans/repayment')
.then(
response => {
this.loans = response.body
// console.log(response)
})
.catch(function(error){
console.log(error)
})
}
}
</script>
<style type="text/css">
ul{
list-style: none;
}
li{
display: inline;
}
</style>
我希望得到的结果:
| Month | OpeningPrincipal | PrincipalTaken | Interest | Payment | RepaymentDate | ClosingPrincipal |
|-------|-------------------|-----------------|-----------|---------|---------------|-------------------|
| 1 | 7000 | 3475.55 | 6300 | 9775.55 | Mar 17, 2018 | 66524.45 |
依此类推,直到完成 12x7 表格。
谢谢!!!
编辑>> 我已经决定从我的 laravel 应用程序发送一个 JSON 响应,但我仍然不知道如何实现我的目标。 JSON 对象显示在此处:
最佳答案
我用这个解决了
var vue = new Vue({
el:'#textExample',
data:{
loans:[ { "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9, "10": 10, "11": 11, "12": 12 }, { "1": 70000, "2": 66524.45, "3": 62736.11, "4": 58606.81, "5": 54105.88, "6": 49199.86, "7": 43852.3, "8": 38023.47, "9": 31670.03, "10": 24744.79, "11": 17196.27, "12": 8968.39 }, { "1": 3475.55, "2": 3788.35, "3": 4129.3, "4": 4500.93, "5": 4906.02, "6": 5347.56, "7": 5828.84, "8": 6353.43, "9": 6925.24, "10": 7548.52, "11": 8227.88, "12": 8968.39 }, { "1": 6300, "2": 5987.2, "3": 5646.25, "4": 5274.61, "5": 4869.53, "6": 4427.99, "7": 3946.71, "8": 3422.11, "9": 2850.3, "10": 2227.03, "11": 1547.66, "12": 807.16 }, { "1": 9775.55, "2": 9775.55, "3": 9775.55, "4": 9775.55, "5": 9775.55, "6": 9775.55, "7": 9775.55, "8": 9775.55, "9": 9775.55, "10": 9775.55, "11": 9775.55, "12": 9775.55 }, { "1": "Mar 17, 2018", "2": "Apr 16, 2018", "3": "May 16, 2018", "4": "Jun 15, 2018", "5": "Jul 15, 2018", "6": "Aug 14, 2018", "7": "Sep 13, 2018", "8": "Oct 13, 2018", "9": "Nov 12, 2018", "10": "Dec 12, 2018", "11": "Jan 11, 2019", "12": "Feb 10, 2019" }, { "1": 66524.45, "2": 62736.11, "3": 58606.81, "4": 54105.88, "5": 49199.86, "6": 43852.3, "7": 38023.47, "8": 31670.03, "9": 24744.79, "10": 17196.27, "11": 8968.39, "12": 0 } ]
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="textExample">
<table class="table table-bordered">
<thead>
<tr>
<th> Month</th>
<th> Opening Principal</th>
<th> Principal Taken</th>
<th> Interest</th>
<th> Payment</th>
<th> Repayment Date</th>
<th> Closing Principal</th>
</tr>
</thead>
<tr v-for="loan in loans[0]">
<td v-for="otherloan in loans">{{otherloan[loan]}}</td>
</tr>
</table>
</div>
只改变 tr 和 td 标签 v-for 是这样的:
<tr v-for="loan in loans[0]">
<td v-for="otherloan in loans">{{otherloan[loan]}}</td>
</tr>
关于javascript - 使用 VueJS 将 JSON 对象显示到表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48812869/