Are you first timer at lazacode.org? Why not join us and start exchange your programming knowledge with everyone. Register today!

Vue - outputting API content

0 votes
46 views
added Jun 29, 2018 in Vue by LC Marshal Captain (25,840 points)
edited Jul 13, 2018 by LC Marshal
<!-- index.html @ sitename/index.html -->
<head>
  <script>
    // pass to js
    var propertyData = {};
    propertyData['images'] = 'http://lc.org/images/1.jpg,http://lc.org/images/2.jpg';
    propertyData['documents'] = 'http://lc.org/doc/go.pdf';
    propertyData['property-detail'] = '<p>Property detail contents goes here</p>';
    propertyData['events-timeline'] = '[{"date":"13th October 2017","description":"Property listed on resale market"},{"date":"12th October 2017","description":"Purchase completed"},{"date":"8th September 2017","description":"Contracts exchanged"},{"date":"23rd August 2017","description":"Property fully funded"},{"date":"16th August 2017","description":"Investment opened"}]';
    propertyData['events-timeline'] = JSON.parse('[{"date":"13th October 2017","description":"Property listed on resale market"},{"date":"12th October 2017","description":"Purchase completed"},{"date":"8th September 2017","description":"Contracts exchanged"},{"date":"23rd August 2017","description":"Property fully funded"},{"date":"16th August 2017","description":"Investment opened"}]');
  </script>
</head>
 
<!-- template @ sitename/src/components/MainPanel.vue -->
<!--use v-for to get value from data array-->
<li v-for="event in propertyData['events-timeline']">
  <span class="title">{{event.description}}</span>
  <span class="date">{{event.date}}</span>
</li>
 
<!--fotorama-->
<div class="fotorama" data-nav="thumbs">
    <a v-for="img in images" :key="img" v-bind:href="img"><img :src="img" width="144" height="96"></a>
</div>
 
<!--document-->
<div class="col-md-6" v-for="d in documents" :key="d">
    <a :href="d" target="_blank">
      <i class="icon-download ion-ios-download-outline"></i> {{decodeURIComponent(d.split('/').pop())}}</a>
</div>
 
<!--show more/less-->
<truncate clamp="+ Show more" :length="200" less=" - Show Less" :text="propertyData['floorplan']" type="html"></truncate>
 
 
<script>
  data() {
    return {
      propertyData: window.propertyData,
    };
  },
  methods: {
    filesToArray(propertyDataKey) {
      if (!this.propertyData[propertyDataKey].trim()) return [];
      return this.propertyData[propertyDataKey].split(",").map(img => {
        return img.trim();
      });
    }
  },
  computed: {
    images() {
      return this.filesToArray("images");
    },
    documents() {
      return this.filesToArray("documents");
    }
  }
};
</script>

Please log in or register to response this reference.

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...