Laravel VueJs 存储数组来自 axios 请求中的 laravel Z594C103F2C6E04C3D8AB059C

Question

I have a laravel 5.7 application which uses VueJS 2.0 for the front end. I have two table with many-to-many relation: commandes and produits.I am currently attempting to pass data in to my commandes table but i am getting this error:

SQLSTATE[42S22]: Column not found: 1054 Unknown column '0' in 'field list' (SQL: insert into `commande_produit` (`0`, `commande_id`, `produit_id`) values (3, , 0))

If anyone can tell me how to fix or even point me in the right direction it would be much appreciated.

The html template:

<template>
   <div class="container">
       <div class="row justify-content-center mt-5" v-if="$gate.isAdminOrVendeur()">
           <div class="col-md-12">
               <form class="" @submit.prevent="envoyer()" >
               <table class="table table-bordered table-striped table-responsive">
                   <thead class="thead-dark">
                       <tr>
                           <th class="col-sm-4">Produit</th>
                           <th class="col-sm-2">Quantité</th>
                           <th class="col-sm-2">montant</th>
                           <th class="col-sm-2">Total</th>
                           <th class="col-sm-1"></th>
                           <th class="col-sm-1"></th>
                       </tr>
                   </thead>
                   <tbody>
                   <tr v-for="(commande, index) in commandes" :key="index">
                       <td>{{ commande.produit_id }}</td>
                       <td>{{ commande.quantite }}</td>
                       <td>{{ commande.montant }} F</td>
                       <td>{{ (commande.quantite * commande.montant).toFixed(2) }} F</td>
                       <td><a class="btn btn-info btn-block" @click="modifier(index)">Modifier</a></td>
                       <td><a class="btn btn-warning btn-block" @click="supprimer(index)">Poubelle</a></td>
                   </tr>
                   <tr>
                       <td colspan="3"></td>
                       <td><strong> F </strong></td>
                       <td colspan="2"></td>
                   </tr>
                   <tr>
                       <td>
                           <div class="form-group">                            
                           <select v-model="form.produit_id" name="produit_id" class="form-control">
                               <option v-for="produit in produits.data" :key="produit.id" v-bind:value="produit.id">{{ produit.designation }}</option>                                
                           </select>

                       </div>
                       </td>
                       <td><input type="text" class="form-control" v-model="form.quantite"></td>
                       <td><input type="text" class="form-control" v-model="form.montant"></td>
                       <td colspan="3"><a class="btn btn-primary btn-block" @click="ajouter">Ajouter</a></td>
                   </tr>
                   </tbody>
                   <tfoot>
                   <a class="button btn btn-xs btn-warning" @click="toutPoubelle">Tout à la poubelle</a>
                   <button class="button btn btn-xs btn-success" type="submit">Valider</button>
                   </tfoot>
               </table>
           </form>
           <div class="panel panel-danger" v-show="poubelle.length">
               <div class="panel-heading">Poubelle</div>
               <table class="table table-bordered table-striped table-responsive">
                   <thead>
                   <tr>
                       <th class="col-sm-4">Produit</th>
                       <th class="col-sm-2">Quantité</th>
                       <th class="col-sm-2">montant</th>
                       <th class="col-sm-2">Total</th>
                       <th class="col-sm-1"></th>
                       <th class="col-sm-1"></th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr v-for="(commande, index) in poubelle" :key="index">
                       <td>{{ commande.produit }}</td>
                       <td>{{ commande.quantite }}</td>
                       <td>{{ commande.montant }} F</td>
                       <td>{{ (commande.quantite * commande.montant).toFixed(2) }} F</td>
                       <td><a class="btn btn-success btn-block" @click="retablir(index)">Rétablir</a></td>
                       <td><a class="btn btn-danger btn-block" @click="eliminer(index)">Supprimer</a></td>
                   </tr>
                   </tbody>
               </table>
               <div class="panel-footer">
                   &nbsp;
                   <div class="btn-group">
                       <a class="button btn btn-xs btn-success" @click="toutRetablir">Tout rétablir</a>
                       <a class="button btn btn-xs btn-danger" @click="toutEliminer">Tout supprimer</a>
                   </div>
               </div>
           </div>
           </div>            
       </div>
   </div>
</template>

My vue instance:

<script>
    export default {
        data () {
            return {                
            commandes: [],
            poubelle: [], 
            produits: {}, 
            form: new Form({                                  
                produit_id : '',                    
                quantite : '',                    
                montant: '',                   
            })       
            }
        },

        methods: {      
            ajouter() {
                this.commandes.push({produit_id: this.form.produit_id, quantite: this.form.quantite, montant: this.form.montant});
                this.form = {};
                this.commandes.sort(ordonner);
            },

            modifier(index) {
                this.form.produit_id = this.commandes[index].produit_id;
                this.form.quantite = this.commandes[index].quantite;
                this.form.montant = this.commandes[index].montant;
                this.commandes.splice(index, 1);
            },

            supprimer(index) {
                this.poubelle.push(this.commandes[index]);
                this.commandes.splice(index, 1);
                this.poubelle.sort(ordonner);
            },

            retablir(index) {
                this.commandes.push(this.poubelle[index]);
                this.poubelle.splice(index, 1);
                this.commandes.sort(ordonner);
            },

            eliminer(index) {
                this.poubelle.splice(index, 1);
            },

            toutPoubelle() {
                this.poubelle = this.poubelle.concat(this.commandes);
                this.poubelle.sort(ordonner);
                this.commandes = [];
            },

            toutRetablir() {
                this.commandes = this.commandes.concat(this.poubelle);
                this.commandes.sort(ordonner);
                this.poubelle = [];
            },

            toutEliminer() {
                this.poubelle = [];
            },

            loadProduits(){
                //if(this.$gate.isAdminOrComptable()){
                    axios.get("api/produit").then(({ data }) => (this.produits = data));
                //}
            },

            envoyer() {
                axios.post('api/commande', {commande: this.commandes});
                this.commandes = [];        
            },       
        },
        mounted() {
            this.loadProduits();
            console.log('Component mounted.')
        }
    }

    var ordonner = function (a, b) {
        return (a.commande.toUpperCase() > b.commande.toUpperCase())
    };
</script>

This is the commandes model:

class Commande extends Model
{
    protected $fillable = ['commande'];

    public function produits()
    {
    return $this->belongsToMany('App\Models\Produit');
    }
}

and the produits model:

class Produit extends Model
{
    protected $fillable = ['designation'];

    public function commandes()
    {
        return $this->belongsToMany('App\Models\Commande');
    }
}

the commande controller store() method:

 public function store(Request $request)
    {

        $this->validate($request,[
            'commande' => 'required',
        ]);

        $commande = new Commande();

        $commande->produits()->attach([$request->commande]);

        $commande->save();

    }

Answer 1

Several things may not work as expected in your code:

1. You are trying to attach produits on a non-existing model.

By using new Commande you are just preparing the object Commande and not yet saving it to the database. You can't attach anything on it since it doesn't have an id yet.

Solution : use Create instead of New

2. The method attach() is not used properly

As per the doc ( https://laravel.com/docs/7.x/eloquent-relationships#updating-many-to-many-relationships ) attach() is expecting an array of ids. You are trying to pass a custom array so the method won't work.

Solution : extract the Ids from your $request->command and then use attach()

Answer 2

Her is the final store() function:

public function store(Request $request)
    {

        $this->validate($request,[
            'commande' => 'required',
        ]);

        $commande = new Commande();

        $commande->save();

        $produitsId = array_column($request->commande, 'produit_id');

        $commande->produits()->attach($produitsId);

    }

Hope it help someone.