Question

我在LARAVEL项目中使用此代码

项目在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端点，所以laravel控制器从那里循环遍历$request->get('items')并将其持久保存到DB。

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

1 个答案: