Vue-切割json数组字符串并循环输出

Posted 2020-10-19 嘆世殘者——華帥

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>