[Vuejs]-How to use props with filters in vuejs

by

0👍

You can pass the data to the Chart component over a property.
And then use the data from the property in your chart.

Create the orders prop.

export default {
   props: ['orders'],
   mounted() {
     this.createPieChart();
....

Create allOrders computed value

export default {
   components: {
    piechart
  },
  data() {
    return { interval: null }
  },
  computed: {
       allOrders() {
          const weekAgo = new Date(now - 7 * 24 * 60 * 60 * 1000);
          let allOrders = this.allOrders;
          if (this.interval === "weekly") {
             allOrders = this.allOrders.filter(
                order => new Date(order.created_at) >= weekAgo
             ); 
          }
          return allOrders;
       }
  },
  methods: {
  .....

and pass allOrders to orders prop

<piechart :orders="allOrders"/>

Leave a comment