如何将动态生成的 vuejs 数组发布到 mysql 数据库

Question

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

http://jsfiddle.net/teepluss/12wqxxL3/

商品在 cart_items 数组中动态生成。

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

我该怎么做呢

这是我的脚本

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 Vue - 1.0.12 vue 资源 - 0.1.17

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

Answer 1

所以你只是想发布它？

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

这将发布到您的 api 端点，以便从那里通过 $request->get('items') 循环到 laravel 控制器并将其持久化到 DB。