1

Working in Vuejs, Laravel and Quasar all together, i made a dashboard for Admin. now i want to find the number of current products, users and orders are saved in a separate table each in mySQL database. i was not able to do so, and what i understood is that we can do it via {{products.lenght}}. is there anyway to do that? this is where i want to show to show the number of elements:

EDIT

These are my codes:

Template:

<template>
  <div class="layout-padding ">
    <div class="flex wrap gutter">
      <div class="width-1of3 xl-auto">
      <q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px">
      <q-card-title>
        Products
        <span slot="subtitle">Available products</span>
      </q-card-title>
      <q-card-main>
        <a href='/#/products/index'>Products {{products.length}} </a>
      </q-card-main>
    </q-card>
      </div>
      <div class="width-1of3 sm-auto">
      <q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px">
      <q-card-title>
        Orders
        <span slot="subtitle">Available Orders</span>
      </q-card-title>
      <q-card-main>
        <a href='/admin/products'>Orders</a>
      </q-card-main>
    </q-card>
      </div>
      <div class="width-1of3 sm-auto">
      <q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px">
      <q-card-title>
        Users
        <span slot="subtitle">Current Registered Users</span>
      </q-card-title>
      <q-card-main>
        <a href='/products/users'>Users </a>
      </q-card-main>
    </q-card>
      </div>
        <div class="width-1of3 sm-auto">
      <q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px">
      <q-card-title>
        Categories
        <span slot="subtitle">Available Categories</span>
      </q-card-title>
      <q-card-main>
        <a href='/admin/products'>Categories</a>
      </q-card-main>
    </q-card>
      </div>
    </div>
      <q-card style="background:#33b5e5; color:white; padding:20px; height:250px; margin-top:10px;">
      <q-card-title>
        Categories
        <span slot="subtitle">Current Categories</span>
      </q-card-title>
      <q-card-main>
      </q-card-main>
    </q-card>
  </div>
</template>

Script:

<script>
import axios from 'axios'

export default {
  data () {
    return {
      user: null,
      columns: [
        { name: 'id', label: 'ID', field: 'id', sortable: false, align: 'left' },
        { name: 'category_id', label: 'Cat ID', field: 'category_id', sortable: true, align: 'left' },
        { name: 'product_name', label: 'Name', field: 'product_name', sortable: true, align: 'left' },
        { name: 'product_detail', label: 'Details', field: 'product_detail', sortable: true, align: 'left' },
        { name: 'original_price', label: 'Prev Price', field: 'original_price', sortable: true, align: 'left' },
        { name: 'product_price', label: 'Price', field: 'product_price', sortable: true, align: 'left' },
        { name: 'actions', label: 'Actions', sortable: false, align: 'right' }
      ],
      selected: [],
      loading: false,
      serverPagination: {
        page: 1,
        rowsNumber: 10, // the number of total rows in DB
        rowsPerPage: 5,
        sortBy: 'id',
        descending: true
      },
      serverData: [],
      products: []
    }
  },
  methods: {
    request ({ pagination }) {
      // QTable to "loading" state
      this.loading = true
      axios
        .get(`http://127.0.0.1:8000/products/list/${pagination.page}?rowsPerPage=${pagination.rowsPerPage}&sortBy=${pagination.sortBy}&descending=${pagination.descending}`)
        .then(({ data }) => {
          // updating pagination to reflect in the UI
          this.serverPagination = pagination

          // we also set (or update) rowsNumber
          this.serverPagination.rowsNumber = data.rowsNumber

          // then we update the rows with the fetched ones
          this.serverData = data.rows

          // finally we tell QTable to exit the "loading" state
          this.loading = false
        })
        .catch(error => {
          // there's an error... do SOMETHING
          console.log(error)

          // we tell QTable to exit the "loading" state
          this.loading = false
        })
    },
    destroy (id, rowIndex) {
      this.$q.dialog({
        title: 'Delete',
        message: 'Are you sure to delete ' + name + '?',
        color: 'primary',
        ok: true,
        cancel: true
      }).then(() => {
        axios
          .delete(`http://127.0.0.1:8000/products/${id}`)
          .then(() => {
            // this.serverData[rowIndex].id = 'DELETED'
            this.$q.notify({type: 'positive', timeout: 2000, message: 'The product has been deleted.'})
          })
          .catch(error => {
            this.$q.notify({type: 'negative', timeout: 2000, message: 'An error has been occured.'})
            console.log(error)
          })
      }).catch(() => {
        // cancel - do nothing?
      })
    }
  },
  mounted () {
    // once mounted, we need to trigger the initial server data fetch
    this.request({
      pagination: this.serverPagination,
      filter: this.filter
    })
    axios
      .get('http://127.0.0.1:8000/products')
      .then(response => {
        this.products = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

Added Image

This is what i wanted, if someone does not understand the question.

Result of what i wanted

Improve this question
7
  • how do you get back that data in vue.js side? Commented Dec 9, 2018 at 23:52
  • Using axios.get'('http://127.0.0.1:8000/products/list') Commented Dec 10, 2018 at 0:31
  • could you add the whole code please? Commented Dec 10, 2018 at 0:32
  • I updated my question and added codes as well. Commented Dec 10, 2018 at 0:36
  • so where'e the issue? i see that you're doing it right Commented Dec 10, 2018 at 0:53

1 Answer 1

Reset to default
3

I'm assuming a few things here given that you're using Laravel you're probably trying output a JSON response using eloquent.

web.php

//Assumed Laravel Route For
//http://127.0.0.1:8000/products/list/${pagination.page}?rowsPerPage=${pagination.rowsPerPage}&sortBy=${pagination.sortBy}&descending=${pagination.descending}
Route::get('products/list','ProductController@index');

ProductController.php

class ProductController  {

    public function index()
    {
        $products = Product::all();

        $allProductsWithProductCount = [
            'products' => $products,
            'products_count' => $products->count()
        ];

        return $allProductsWithProductCount;
    }
}

What you can do is count the products, or whatever collection you're returning, add it to an array and return the output like above.

Vue

data () {
    return {
        productCount: null,
    }
}

In Axios Method

axios
.get(`http://127.0.0.1:8000/products/list/${pagination.page}?rowsPerPage=${pagination.rowsPerPage}&sortBy=${pagination.sortBy}&descending=${pagination.descending}`)
.then(({ data }) => {
  this.productCount = data.product_count;
})

Vue Template

<h1>Product Count: {{productCount}}</h1>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I have no idea, now even i can't see the number 0, which i had before, i set all the codes as you said, but still stuck.
console.log(data) And copy the JSON response into a codepen for me please.
does it matter, where to put codes in script? i mean where to put productCount: null, ?
I deleted my answer. thanks for your help. i really wanted to have a right answer for that, so that a user can use it again. and i really did not notice that i can edit your answer. Thank you again.
No problem. Thank you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.