1. 程式人生 > >Vue-切割json數組字符串並循環輸出

Vue-切割json數組字符串並循環輸出

report 字符 gpo port location 輸出 dealer wal .json

Json

        "detailList":[  
                  " 04/08/2016 - LA - -  Dept. - TITLE (Lien Reported)",
                  " 04/05/2016 - KA - - Motor Dept. - REGISTRATION RENEWAL (Lease) ",
                  " 03/20/2016 - SA - 30 - Motor Dept. - ODOMETER",
                  " 03/16/2016 - - - Source - DEALER "
               ]

*.vue

<template>
<div class="tab-pane" id="historyReport">
                        <p class="ptb16 plr30 bgc-0d7dce fs16 c-fff">History Report</p>
                        <div class="panel-group vehicleHistory">
                            <div class="ptb16 plr20" v-for
="e in strs"> <div class="mb12 df jc-sb"> <span class="fs16">{{e.split(‘-‘)[3]}}</span><span class="fs12 lh24 c-c4c4c4">{{e.split(‘-‘)[0]}}</span> </div> <p class="fs12">Location:<span>{{e.split(‘-‘)[1]}}</span></p> <p class="fs12">Mileage Record:<span>{{e.split(‘-‘)[2]}}</span>Miles</p> <p class="fs12"><span>{{e.split(‘-‘)[4]}}</span></p> </div> </div> </div> </template> <script> export
default { data () { strs: [] } }, created: function () { this.getCarReport() }, methods: { getCarReport () { return this.$http.get(‘/***/****/‘ + this.id + ‘.json‘) .then((response) => { this.shareCarInfo = response.data.data this.strs = this.shareCarInfo.****.****.detailList }) } } } </script>

Vue-切割json數組字符串並循環輸出