Question

我一直在努力解决这个问题。我有一个包含多行的表。每行都有一个数量（静态数字），一个有一些数字的选择框和一个总列。我尝试做的是当用户在下拉列表中选择一个值时，数量将乘以用户选择并立即在同一行的总列中显示结果。我试图使用vuejs和jquery并继续撞墙。

这是我的vuejs代码：请注意评论

<script>
    new Vue({
       el: '#app',
       data: {
           total: ''
       },
        methods: {
          calculateTotal: function(skid, quantity)
          {
              this.total = skid * quantity
          }
        }
    });
</script>

<td>{{$part->skid_quantity}}</td>
                        <td>@{{ total }}</td>
                        <td>
                            <div class="form-group{{ $errors->has('quantity')? ' has-error' : ''}}">
                                <select name="quantity[]" class="form-control" v-on:change="calculateTotal('{{$part->skid_quantity}}','How to get the selected quantity value in the form below for each row')">
                                    @for($i = 0; $i <= $part->quantity; $i++)
                                        <option value="{{$i}}">{{$i}}</option>
                                    @endfor
                                </select>
                                {!! Form::hidden('parts_id[]', $part->id) !!}
                                {!! Form::hidden('slug', $category->slug) !!}
                            </div>
                        </td>

非常感谢

Answer 1

你可以在JQuery中尝试这样的东西

{{1}}

Answer 2

您可以在VueJS中尝试这样的事情

<script>
    new Vue({
        el: '#app',
        data: {
            total: '',
            quantity: []
        },
        methods: {
            calculateTotal: function (skid)
            {
                this.total = '';
                for (var i = 0; i < this.quantity.length; i++) {
                    this.total += skid * this.quantity[i];
                }

            }
        }
    });
</script>

<td>{{$part->skid_quantity}}</td>
<td>@{{ total }}</td>
<td>
    <div class="form-group{{ $errors->has('quantity')? ' has-error' : ''}}">
        <select name="quantity[]" class="form-control" v-on:change="calculateTotal('{{$part->skid_quantity}}')" v-model="quantity">
            @for($i = 0; $i <= $part->quantity; $i++)
            <option v-bind:value="{{$i}}">{{$i}}</option>
            @endfor
        </select>
        {!! Form::hidden('parts_id[]', $part->id) !!}
        {!! Form::hidden('slug', $category->slug) !!}
    </div>
</td>

根据用户选择选项计算每行中表中两个单元格的总和

2 个答案: