title: How can we retrieve count of products from database using vue js?
body: <p>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 <code>{{products.lenght}}</code>. is there anyway to do that?
  this is where i want to show to show the number of elements:</p>
  
  <p><strong>EDIT</strong> </p>
  
  <p>These are my codes: </p>
  
  <p>Template:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="layout-padding "&gt;
      &lt;div class="flex wrap gutter"&gt;
        &lt;div class="width-1of3 xl-auto"&gt;
        &lt;q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px"&gt;
        &lt;q-card-title&gt;
          Products
          &lt;span slot="subtitle"&gt;Available products&lt;/span&gt;
        &lt;/q-card-title&gt;
        &lt;q-card-main&gt;
          &lt;a href='/#/products/index'&gt;Products {{products.length}} &lt;/a&gt;
        &lt;/q-card-main&gt;
      &lt;/q-card&gt;
        &lt;/div&gt;
        &lt;div class="width-1of3 sm-auto"&gt;
        &lt;q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px"&gt;
        &lt;q-card-title&gt;
          Orders
          &lt;span slot="subtitle"&gt;Available Orders&lt;/span&gt;
        &lt;/q-card-title&gt;
        &lt;q-card-main&gt;
          &lt;a href='/admin/products'&gt;Orders&lt;/a&gt;
        &lt;/q-card-main&gt;
      &lt;/q-card&gt;
        &lt;/div&gt;
        &lt;div class="width-1of3 sm-auto"&gt;
        &lt;q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px"&gt;
        &lt;q-card-title&gt;
          Users
          &lt;span slot="subtitle"&gt;Current Registered Users&lt;/span&gt;
        &lt;/q-card-title&gt;
        &lt;q-card-main&gt;
          &lt;a href='/products/users'&gt;Users &lt;/a&gt;
        &lt;/q-card-main&gt;
      &lt;/q-card&gt;
        &lt;/div&gt;
          &lt;div class="width-1of3 sm-auto"&gt;
        &lt;q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px"&gt;
        &lt;q-card-title&gt;
          Categories
          &lt;span slot="subtitle"&gt;Available Categories&lt;/span&gt;
        &lt;/q-card-title&gt;
        &lt;q-card-main&gt;
          &lt;a href='/admin/products'&gt;Categories&lt;/a&gt;
        &lt;/q-card-main&gt;
      &lt;/q-card&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;q-card style="background:#33b5e5; color:white; padding:20px; height:250px; margin-top:10px;"&gt;
        &lt;q-card-title&gt;
          Categories
          &lt;span slot="subtitle"&gt;Current Categories&lt;/span&gt;
        &lt;/q-card-title&gt;
        &lt;q-card-main&gt;
        &lt;/q-card-main&gt;
      &lt;/q-card&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>&lt;script&gt;
  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}&amp;sortBy=${pagination.sortBy}&amp;descending=${pagination.descending}`)
          .then(({ data }) =&gt; {
            // 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 =&gt; {
            // 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(() =&gt; {
          axios
            .delete(`http://127.0.0.1:8000/products/${id}`)
            .then(() =&gt; {
              // this.serverData[rowIndex].id = 'DELETED'
              this.$q.notify({type: 'positive', timeout: 2000, message: 'The product has been deleted.'})
            })
            .catch(error =&gt; {
              this.$q.notify({type: 'negative', timeout: 2000, message: 'An error has been occured.'})
              console.log(error)
            })
        }).catch(() =&gt; {
          // 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 =&gt; {
          this.products = response.data
        })
        .catch(error =&gt; {
          console.error(error)
        })
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Added Image</strong> </p>
  
  <p>This is what i wanted, if someone does not understand the question. </p>
  
  <p><a href="https://i.stack.imgur.com/lXcjJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lXcjJ.png" alt="Result of what i wanted"></a></p>