如何在不重复相同值的情况下在 vuejs 中创建动态 onclick 元素

Question

我正在尝试在 vuejs 中创建一个表单，其中一组输入可以附加 onclick。它工作正常，但问题是，所有输入 return 相同的值。我在这里分享一张图片：

我正在从模板中分享我的代码：

<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)
    },
}

Input returns null if I use "input" instead :

Answer 1

问题是没有向 v-model 提供正确的数据。

在这里，您进行一次迭代，将“输入”作为一个元素。

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

但是在这里，您提供的是“data.invoice_product”而不是“输入”。

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

只需将“data.invoice_product.product_id”更改为“input.product_id”，其他输入也一样。

Answer 2

您已经用这个

循环data.invoice_product

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

所以你的 select 标签上的 v-model 应该是

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

而不是

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

Quantity 和 Total 的 input 标签情况类似。

所以，模板中的代码应该是这样的：

<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)
    },
}

如何在不重复相同值的情况下在 vuejs 中创建动态 onclick 元素

How to create dynamic onclick elements in vuejs without repeating same value

javascript

vue.js