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

Vue - example of data binding with vue directive

0 votes
32 views
added Nov 7 in Vue by LC Marshal Captain (25,420 points)
edited Nov 8 by LC Marshal
<!--##################################################################### 
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>

 

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.
...