Question

你有一个vue组件，如下所示。我正在使用数组来包含动态数量的输入。然后通过axios作为对laravel函数的post请求。处理它的位置，并根据该数组中的行数创建多个表行。我用来传递值的数组是chargeArrays。
如何处理从laravel函数通过axios发送的数组来创建多个表行？

”

    <div class="form-group row">
    <a class="btn btn-primary col-offset-sm-8" @click="addRow">Add row</a>
        <label for="charges" class="col-sm-2 col-form-label">charges</label>
        <div class="col-sm-8 form-inline">
            <li v-for="(chargeArray,index) in chargeArrays" class="list-group-item">
                <select class="form-control" v-model="chargeArray.chargeType" @change="updatePrice(index)">
                  <option disabled value="">Please select one</option>
                  <option v-for="charge in list" v-bind:value="charge.id">{{ charge.name }}</option>
                </select>
                <input class="form-control" type="text" v-model="chargeArray.chargedPrice" @change="updateTotal(index)">
                <input class="form-control" type="text" v-model="chargeArray.nos" @change="updateTotal(index)">
                <input class="form-control" type="text" v-model="chargeArray.total" disabled>
            </li>
        </div>
    </div>
    <div class="form-group row col-sm-offset-6">
        <label class="col-form-label col-sm-3 pull-left">Grand Total</label>
        <div class="col-sm-4">
            <input type="text" v-model="grandTotal"  class="form-control" disabled>
        </div>
    </div>        
     <a class="btn btn-success" @click="formSubmit">Submit</a>



</div>

export default {
    data : function(){
        return{

            total:'',
            list:[],
            chargeArrays:[
            {chargeType:'',nos:'',chargedPrice:'',total:''}]

        }
    },
    mounted() {
        console.log('Component mounted.')
    },
    computed: {
        grandTotal:function(){
            this.total=0;
            for(var i=0;i<this.chargeArrays.length;i++){
                this.total+=this.chargeArrays[i].total;
            }
            return this.total;
        }
    },
    created(){
        this.fetchPriceList();

    },
    methods:{

        addRow: function(){
          this.chargeArrays.push({chargeType:'',nos:'',chargedPrice:'',total:''});
        },
        updatePrice:function(index){
            axios.get('/api/pricechart/'+event.target.value).then((res) => {
                this.chargeArrays[index].chargedPrice = res.data;
            });

        },
        updateTotal:function(index){

                this.chargeArrays[index].total = this.chargeArrays[index].chargedPrice*this.chargeArrays[index].nos  ;


        },
        fetchPriceList:function() {
            axios.get('/api/pricechart').then((res) => {
                this.list = res.data;
            });
        },

        formSubmit:function(){

            axios.post('/job/create',{
            chargeArrays:this.chargeArrays,


            }).then(function(response){
            console.log(response);
            }).catch(function (error) {
                console.log(error);
              });
        }
    }
}'

Answer 1

看起来您的值名称（camelCase）与您的表列名称（charge_type）不匹配，这只是一个猜测，所以您需要循环遍历数组，如下所示。

$charges = $request->all('chargeArrays');
foreach($charges as $i => $charge){
  $c = [
      'charge_type'   => $charge['chargeType'],
      'nos'           => $charge['nos'],
      'charged_price' => $charge['chargedPrice'],
      'total'         => $charge['total']
  ];

  // insert the data...
  DB::table('the_charge_table')->insert($c);
}

Answer 2

我通过使用以下循环得到了答案

$priceInput=$request->only('chargeArrays');
    foreach($priceInput as $i => $chargeArray){
        foreach ($chargeArray as $j=> $charge) {
             $c = [
                  'charge_type'   => $charge['chargeType'],
                  'nos'           => $charge['nos'],
                  'charged_price' => $charge['chargedPrice'],
                  'total'         => $charge['total']
              ];
              \Log::info($c); 
        }

    }

如何从vue表单处理数组通过laravel中的axios发送？

2 个答案: