如何post动态生成vuejs数组到mysql数据库

Question

我在我的 LARAVEL 项目中使用此代码

项目在 cart_items 数组中动态生成。

我想知道如何遍历生成的项目并将其 post 传送到数据库或如何将其传递给控制器并从那里保存它。

我应该怎么做

这是我的脚本

var app = new Vue({

http: {
  root: '/root',
  headers: {
    'X-CSRF-TOKEN': document.querySelector('#token').getAttribute('value')
  }
},

el: '#wrapper',
data: {
    cart_items: [],
},

created() {

    this.$http.get('http://localhost:8000/api/ice', function(ice) {
    //console.log(ice);
    this.articles = ice;
}.bind(this));

    },

        computed: {
            count: function() {
                return this.cart_items.length;
            },
            total: function() {
                return _.reduce(this.cart_items, function(n, cart_item) {
                    return cart_item.price * cart_item.qty + n;
                }, 0).toFixed(2);
            },

            filteredArticles: function() {
            var articles_array = this.articles,
                searchString = this.searchString;


            if (!searchString) {
                return articles_array;
            }

            searchString = searchString.trim().toLowerCase();

            articles_array = articles_array.filter(function(item) {
                if (item.title.toLowerCase().indexOf(searchString) !== -1) {
                    return item;
                }
            })

            return articles_array;;
        }

        },
        methods: {

            notInCart: function(article) {
                var ids = _.pluck(this.cart_items, 'id');
              return !_.contains(ids, article.id);
            },

            addToCart: function(product) {
            var cart = Vue.util.extend({}, product);
            var ids = _.pluck(this.cart_items, 'id');

                    if (!_.contains(ids, product.id)) {
              cart.qty = 1;       
                        this.cart_items.push(cart);
                    }
            },


            addQty: function(product) {
                product.qty = product.qty +1;
            },

            decQty: function(product) {
                product.qty -= 1;
                if (product.qty <= 0) {
                    this.cart_items.$remove(product);
                }
            },

            clearall:function(){
                 this.cart_items = [];
            },

            UserOrder: function(){
                 var order = this.cart_items;
                 var output = JSON.parse(JSON.stringify(order));
                 // I am able to see the output in the dev console here
                // How should go about posting this to the mysql database. 
                 console.log(output);          
            }

        }
    });

这里还有项目设置

Laravel - 5.4 视图-1.0.12 vue 资源 - 0.1.17

我是新手。任何帮助将不胜感激

Answer 1

那么你只想post吗？

methods: {
  ...
  postData: function() {
    this.http.post('your/endpoint', { items: this.cart_items })
      .then( (response) => { // your server response } )
      .catch( (error) => { // error callback } )
  }
  ...

这将 post 到您的 api 端点，因此从那里到 laravel 控制器循环通过 $request->get('items') 并将其保存到数据库。

如何post动态生成vuejs数组到mysql数据库

How to post dynamically generated vuejs array to mysql database

php

json

vue.js

laravel-5

laravel-5.4