如何在vuejs中創建動態onclick元素而不重復相同的值

我正在嘗試在 vuejs 中創建一個表單，其中一組輸入可以附加 onclick。它作業正常，但問題是，所有輸入都回傳相同的值。我在這里分享一張圖片：

我從模板分享我的代碼：

<div class="form-group" v-for="(input,k) in data.invoice_product" :key="k">
    <div class="row mb-2">
         <div class="col-md-3">
              <select class="form-control" v-model="data.invoice_product.product_id" 
               @change="getProductCost">
                  <option v-for="(product, i) in products" :key="i" :value="product.id">{{ 
                  product.product_name }}</option>
               </select>
         </div>
         <div class="col-md-3">
              <input type="text" class="form-control" placeholder="Quantity" v- 
               model="data.invoice_product.quantity" @keyup="getProductCost">
         </div>
         <div class="col-md-3">
              <input type="text" class="form-control" placeholder="Total" v- 
              model="data.invoice_product.total">
         </div>
         <div class="col-md-3">
              <span>
                   <i class="fa fa-minus-circle" @click="removeElement(k)" v-show="k || ( !k 
                   && data.invoice_product.length > 1)">Remove</i>
                   <i class="fa fa-plus-circle" @click="addElement(k)" v-show="k == 
                   data.invoice_product.length-1">Add fields</i>
              </span>
          </div>
     </div>
 </div>

從我的腳本中（我排除了不相關的代碼段）：

export default {
data() {
    return {
        data : {
            customer_id : '',
            vat : ''
        },
        inputs: [{
               product_id : '',
               quantity : '',
               total : ''
        }],
        input: {
               product_id : '',
               quantity : '',
               total : ''
         },
        products : []
    }
},

methods : {
   getProductCost() {
       axios.get('/api/product-cost? 
     product_id=' this.item.product_id '&&quantity=' this.item.quantity, 
       this.data).then(response => {
           this.input.total = response.data
       })
    },
   addElement() {
       this.data.invoice_product.push({
            product_id : '',
            quantity : '',
            total : ''
       })
    },

    removeElement (index) {
       this.data.invoice_product.splice(index, 1)
    },
}

如果我改用“輸入”，則輸入回傳 null：

uj5u.com熱心網友回復：

問題在于沒有向 v-model 提供正確的資料。

在這里，您進行了一次迭代，在這里您將“輸入”作為一個元素。

<div class="form-group" v-for="(input,k) in data.invoice_product" :key="k">

但在這里，您提供的是“data.invoice_product”而不是“input”。

<select class="form-control" v-model="data.invoice_product.product_id" 
           @change="getProductCost">

只需將“data.invoice_product.product_id”更改為“input.product_id”，其他輸入也可以這樣做。

uj5u.com熱心網友回復：

你已經在回圈data.invoice_product使用這個

<div class="form-group" v-for="(input,k) in data.invoice_product"> .... </div>

所以標簽v-model上的select應該是

<select v-model="input.product_id"> .... </select>

代替

<select v-model="data.invoice_product.product_id"> .... </select>

和的input標簽的類似情況。QuantityTotal

因此，模板中的代碼應該是這樣的：

<div class="form-group" v-for="(input,k) in data.invoice_product" :key="k">
    <div class="row mb-2">
         <div class="col-md-3">
              <select class="form-control" v-model="input.product_id" 
               @change="getProductCost">
                  <option v-for="(product, i) in products" :key="i" :value="product.id">{{ 
                  product.product_name }}</option>
               </select>
         </div>
         <div class="col-md-3">
              <input type="text" class="form-control" placeholder="Quantity" v- 
               model="input.quantity" @keyup="getProductCost">
         </div>
         <div class="col-md-3">
              <input type="text" class="form-control" placeholder="Total" v- 
              model="input.total">
         </div>
         <div class="col-md-3">
              <span>
                   <i class="fa fa-minus-circle" @click="removeElement(k)" v-show="k || ( !k 
                   && data.invoice_product.length > 1)">Remove</i>
                   <i class="fa fa-plus-circle" @click="addElement(k)" v-show="k == 
                   data.invoice_product.length-1">Add fields</i>
              </span>
          </div>
     </div>
 </div>

[更新]

您的腳本應該保持原樣：

export default {
data() {
    return {
        data : {
            customer_id : '',
            vat : '',
            invoice_product: [{
               product_id : '',
               quantity : '',
               total : ''
            }],
        },
    
        input: {
               product_id : '',
               quantity : '',
               total : ''
         },
        products : []
    }
},

methods : {
   addElement() {
       this.data.invoice_product.push(this.input)
    },

    removeElement (index) {
       this.data.invoice_product.splice(index, 1)
    },
}

標籤：javascript Vue.js

上一篇：是否可以以編程方式隱藏Vuetify資料表項？

下一篇：如果倒計時達到0則觸發函式-VueJS