Vue.js (https://vuejs.org/) provides a simple, cohesive, and incrementally adoptable toolset which you can use to solve many of the challenges that arise when building Single Page Applications or SPAs. It follows the latest innovations in code-splitting and server-side rendering which makes it so popular.

We have explained few typical challenges faced by developers while building a SPA and how to solve them.

1. How to fetch the accurate values from DatePicker model in Vue.js

Problem:

We developed an Analytics Dashboard in Vue.js for the our demo Laravel ECommerce website. We faced issues while fetching the accurate values from the specified date range.
The default method in Vue.js was not well described to get the accuracy.

We have two component in the dashboard(parent) and Date picker model window(child). The Date picker component was called inside the Dashboard. If the dates are changed, the Dashboard data needed to be updated based on the selected dates. Therefore we needed to get the exact values of the selected dates which was difficult since the date input and submit buttons were inside the child component.

While submitting the form we could not get the selected date values directly inside the parent component.

Solution: Create a new Custom event

To address this issue, we created a New custom event in the dashboard(parent) component and it was called inside the date picker(child) component using the $emit function.

Sample Code:

<!-- parent template -->
<template>
  <div id="my-app">
    <date-picker @date-filter="dateFilter"></date-picker>
  </div>
</template>
// parent Vue instance
var vm = new Vue(
  el: '#my-app',

  components: {
    'date-picker': DatePicker
  },

  methods() {
    dateFilter(filterDates) {
    // your code
    }
  }
)

<!-- date-picker child template -->
<template>
  <div>
    <h1>Select Date range</h1>
    <span>Start Date</span>
    <input type="date" v-model="startDate">
    <span>End Date</span>
    <input type="date" v-model="endDate">
    <input type="submit" @click="setFilterDate">
  </div>
</template>

// date-picker Vue code
export default {
  data () {
    return {
      startDate: new Date(),
      endDate: new Date(),
    }
  }
  methods: {
    setFilterDate() {
      this.$emit('date-filter', [this.startDate, this.endDate]);
    }
  }
}

2. Pagination using Vuetify data-table

Problem:

We have used Vuetify data table in our site. The pagination is available by default in Vuetify data table component the pagination, with ‘NEXT’ and ‘PREVIOUS’ button and the number of rows to be shown per page.

However, in our project we needed to implement the pagination as ‘Drop-down’ selection. We tried to split the rows per pages selection into pagination but it did not work.

Solution: Use use ‘v-overflow-btn’

To work around this issue, we used ‘v-overflow-btn’ component for this functionality.

Refer the screenshot for dropdown pagination.

Sample Code:

<template>
  <v-container>
    <v-data-table
      must-sort
      :headers="headers"
      :items="desserts"
      :pagination.sync="pagination"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-left">{{ props.item.language }}</td>
        <td class="text-xs-left">{{ props.item.sessions }}</td>
        <td class="text-xs-left">{{ props.item.session_percentage }}</td>
      </template>
    </v-data-table>

    <!-- start pagination drop down button -->
    <v-overflow-btn
      :items="paginationItems"
      :label="pages"
      v-model="pagination.page"
    ></v-overflow-btn>
    <!-- end pagination drop down button -->
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      snack: false,
      snackColor: '',
      snackText: '',
      paginationItems: [1, 2], // should contain the values of length of the headers
      pagination: {
        descending: true,
        page: 1,
        rowsPerPage: 5, // Set data rows per page
        sortBy: 'session_percentage', // Set default sorting
        totalItems: 0
      },
      headers: [
        { text: 'Language', value: 'language' },
        { text: 'Sessions', value: 'sessions' },
        { text: '% Sessions)', value: 'session_percentage' }
      ],
      desserts: [{
        value: false,
        name: 'United States',
        language: 'United States',
        sessions: new Intl.NumberFormat().format(Math.floor(1e5 * Math.random()) + 100),
        session_percentage: parseFloat(98.99 * Math.random() + 1).toFixed(2)
      },
      {
        // data
      }
      ],
      drawer: true
    }
  }
}
</script>