부트스트랩 Vue 편집 가능 테이블 열

부트스트랩 Vue 편집 가능 테이블 열

입력을 저장하는 열 중 하나가 있는 테이블이 있다.

  <b-table bordered stripped
                         show-empty
                         empty-text="Your cart is empty"
                         class="p-2"
                         :fields="fields"
                         :items="lines">
                    <template slot="quantity" slot-scope="line">
                        <input type="number" class="form-control-sm"
                               style="width:5em"
                               v-model="qvalue"
                               v-on:input="handleQuantityChange($event,line.item)"/>
                    </template>
                    <template slot="product" slot-scope="line">
                        {{line.item.product.name}}
                    </template>
                    <template slot="price" slot-scope="line">
                        {{ line.item.product.price| currency }}
                    </template>
                    <template slot="subtotal" slot-scope="line">
                        {{ (line.item.quantity*line.item.product.price) | currency }}
                    </template>
                    <template slot="remove" slot-scope="line">
                        <b-button size="sm" variant="danger" v-on:click="handleRemove(line)">
                            Remove
                        </b-button>
                    </template>
                </b-table>

문제는 두 개 이상의 값을 추가할 때 첫 번째 열과 q값 바인딩에 있다.나는 두 줄에 같은 가치를 가지고 있다.어떻게 하면 두 가지 다른 가치를 가질 수 있을까?방법은 다음과 같다.

 methods:{
            ...mapMutations({
                change:"cart/changeQuantity",
                remove: "cart/removeProduct"
            }),
            handleQuantityChange(e,line){
                if (e.target.value >0){
                    this.qvalue = e.target.value;
                } else {
                    this.qvalue = 1;
                    e.target.value = this.qvalue
                }
                this.change({line,quantity:e.target.value})
            },


            handleRemove(line){
                this.remove(line.item);
            }

        }

v-modeling qvalue가 좋지 않다고 생각하지만 올바른 방법은 무엇인가?

대신에v-model너는 할 수 있다:value="line.item.quantity".

그래서 당신의 의견은 다음과 같을 것이다.

<input type="number" class="form-control-sm"
                           style="width:5em"
                           :value="line.item.quantity"
                           v-on:input="handleQuantityChange($event,line.item)"/>

여기 vuex를 이용한 양식 처리에 대한 자세한 정보가 있다.

참조URL: https://stackoverflow.com/questions/52546850/bootstrap-vue-editable-table-column