如何使用vue js计算表中的所有元素？

2 回答

• 0

  好的，这是解决方案 .

  首先，正如@ user3325126所说，我定义了我的ProductController的索引函数 .

  public function index()
  {
    {
        $product = Product::all(); 
        return ['product_count' => $product->count(), 'product' => $product]; 
    }
  }
  

  在web.php我写了这个 .

  Route::get('products/list','ProductController@index');
  

  然后我将amountOfProducts返回null .

  amountOfProducts: null
  

  最后在 mounted () 我把这个代码 .

  this.amountOfProducts = response.data.product_count
  

  现在我在我的模板中使用它 .

  <span> {{amountOfProducts}} </span>
  

  这是我模板的完整脚本 .

  <script>
  import axios from 'axios'
  
  export default {
    data () {
      return {
        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, 
          rowsPerPage: 5,
          sortBy: 'id',
          descending: true
        },
        serverData: [],
        products: [],
        amountOfProducts: null
      }
    },
    methods: {
      request ({ pagination }) {
        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 }) => {
            this.serverPagination = pagination
            this.serverPagination.rowsNumber = data.rowsNumber
            this.serverData = data.rows
            this.loading = false
          })
          .catch(error => {
            console.log(error)
            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.$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(() => {
        })
      }
    },
    mounted () {
      this.request({
        pagination: this.serverPagination,
        filter: this.filter
      })
      axios
        .get('http://127.0.0.1:8000/products/list')
        .then(response => {
          this.products = response.data
          this.amountOfProducts = response.data.product_count
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
  </script>
  

  现在它工作，很好 . 我可以获得我的数据库中的订单总数 . 做同样的事情，我也为用户和类别定义，它也可以正常工作 .

  回复于 2024-05-03T15:43:08+08:00
• 0

  鉴于您正在使用Laravel，我可能会尝试使用eloquent输出JSON响应 .

  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;
      }
  }
  

  您可以做的是计算产品，或者您要返回的任何集合，将其添加到数组并返回上面的输出 .

  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>

  回复于 2024-05-03T15:43:08+08:00