Vue - example of data binding with vue directive

<!--##################################################################### 
FILE 1: index.html === sitename/index.html-->
<head>
  <script>
    // pass to js
    var propertyData = {};
    propertyData['images'] = 'http://upload.example.org/property_images/apples.jpg,http://upload.example.org/property_images/apples.jpg';
    propertyData['documents'] = 'http://upload.example.org/property_documents/go.pdf';
    propertyData['property-detail'] = '<p>Iste impedit ex eu quia enim dolorem occaecat non delectus hic repellendus Enim magni eius quidem facere veritatis. Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem! Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi </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>




<!--#####################################################################
FILE 2: 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>
Vue - example of data binding with vue directive

Related reference
