Soft Solutions4U Soft Solutions4U Soft Solutions4U Soft Solutions4U
"Currently we are not accepting any more applications for any job post"
Login Logout
  • Home
    • About Us
    • Why Us?
    • Our Approach
    • Clients-Partners
    • Blog
  • Projects
  • Expertise
    • Technology
    • White Paper
      • Vue.js
        • Solving problems of Single Page Apps with Vue.js
      • PrestaShop
        • How to migrate to PrestaShop from Joomla
        • How to combine delivery notification emails
        • Printable-Voucher-download-button
        • How-to-sell-events-in-PrestaShop
      • TYPO3
        • Corporate TYPO3 Template Installation
        • TYPO3-Restaurant-Template-Installation
        • TYPO3 Template Customization
        • How to Add a New Section in TYPO3 template
        • How to change the name of a section?
      • WordPress
        • Wix vs WordPress
  • Service
    • Ss4uCRM-SuiteCRM
    • TYPO3 Development
    • WordPress Development
    • PrestaShop
    • Payrexx Integration
    • Laravel Development
    • Shopify Development
  • Testimonials
  • Contact
    • Contact Us
    • Project Planner
    • Careers
  • EN
    • DE
    • FR
    • IT
Soft Solutions4U Soft Solutions4U
  • Home
    • About Us
    • Why Us?
    • Our Approach
    • Clients-Partners
    • Blog
  • Projects
  • Expertise
    • Technology
    • White Paper
      • Vue.js
        • Solving problems of Single Page Apps with Vue.js
      • PrestaShop
        • How to migrate to PrestaShop from Joomla
        • How to combine delivery notification emails
        • Printable-Voucher-download-button
        • How-to-sell-events-in-PrestaShop
      • TYPO3
        • Corporate TYPO3 Template Installation
        • TYPO3-Restaurant-Template-Installation
        • TYPO3 Template Customization
        • How to Add a New Section in TYPO3 template
        • How to change the name of a section?
      • WordPress
        • Wix vs WordPress
  • Service
    • Ss4uCRM-SuiteCRM
    • TYPO3 Development
    • WordPress Development
    • PrestaShop
    • Payrexx Integration
    • Laravel Development
    • Shopify Development
  • Testimonials
  • Contact
    • Contact Us
    • Project Planner
    • Careers
  • EN
    • DE
    • FR
    • IT
  • EN
  • DE
  • FR
  • IT

"Currently we are not accepting any more applications for any job post"

Login Logout
Dec 31

Solving problems of Single Page Apps with Vue.js

  • December 31, 2018
  • Shar
  • No Comments
  • Vue js

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.

analytics dashboard build using vue js

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>

Contact:

Do not hesitate to contact us if you have further queries regarding the solutions given above. Just drop an email – info@softsolutions4u.com

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

About The Author

C.E.O. SoftSolutions4U

Leave a reply Cancel reply

Your email address will not be published. Required fields are marked *

contact us

SoftSolutions4U - Digital Transformation Company

Our expertise includes IoT Device Data Visualization, CRM implementation and Designing Accessible Websites.

Categories

  • IonicPressApp Push Notify Integration
  • PrestaShop
  • Recent
  • Social Media Marketing
  • The Business Show- London
  • TYPO3
  • TYPO3-Templates
  • Vue js
  • WEConnect International Europe
  • Wix vs WordPress

ABOUT

We take time to understand your business and create a strategy to fulfil your commercial objectives.

More

LATEST NEWS

  • Why Laravel is ideal framework for a business web application
  • Top 6 technical hitches and how to overcome them with Laravel
  • Wix vs WordPress
  • How to modify the events module to be displayed as a product in prestashop

Latest Project

viviapp-home
vivikola-home-1
lake view
web app for online payment
surfer on snow

Contact Info

Kemp House, 152 City Road,
London EC1V 2NX.
Phone: +44 20 3239 0140 E-Mail: info@softsolutions4u.com Web: www.softsolutions4u.com
© 2023 Soft Solutions4U
Sitemap
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT