<p>我正在尝试使用Vue.js进行发票交易。我的问题是：用户可能想为1个产品编写描述，或者可能想应用折扣（按要求）。我希望无论他想添加哪个项目，都能显示指定的输入。（每行只能有一个说明、折扣）</p> <p>因此，按需 当您按下“描述、折扣和折扣率”按钮时，将推送相关行的输入。</p> <p>非常感谢您的帮助。</p> <p>jsfiddle <pre class="brush:js;toolbar:false;">const app = new Vue({ el: "#app", data: { invoiceItems: [ { name: "", quantity: 0, unit_price: 0, vat_rate: 18, net_total: 0, description: '', discount_value: 0, discount_rate:'usd' }, ], }, methods: { addInvoice() { this.invoiceItems.push({ name: "", quantity: 0, unit_price: 0, vat_rate: 18, net_total: 0, description: '', discount_value: 0, discount_rate:'usd' }); }, removeIncoiceItem(index) { this.invoiceItems.splice(index, 1); }, }, });</pre> <pre class="brush:html;toolbar:false;">&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"&gt;&lt;/script&gt; &lt;div id="app"&gt; &lt;section class="container"&gt; &lt;div class="row"&gt; &lt;table class="table"&gt; &lt;thead class="thead-dark"&gt; &lt;tr&gt; &lt;th style="width:17%"&gt;Name&lt;/th&gt; &lt;th style="width:14%"&gt;Unit Price&lt;/th&gt; &lt;th style="width:15%"&gt;Vat Rate&lt;/th&gt; &lt;th style="width:20%"&gt;Action&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/table&gt; &lt;div v-for="(item, index) in invoiceItems" :key="index" style="margin-bottom: 10px"&gt; &lt;div class="row"&gt; &lt;div class="col-md-2"&gt; &lt;input type="text" v-model="item.name"&gt; &lt;/div&gt; &lt;div class="col-md-2"&gt; &lt;input type="text" v-model="item.unit_price"&gt; &lt;/div&gt; &lt;div class="col-md-2"&gt; &lt;input type="text" v-model="item.net_total"&gt; &lt;/div&gt; &lt;div class="col-md-5"&gt; &lt;button class="btn btn-primary btn-sm"&gt;添加描述&lt;/button&gt; &lt;button class="btn btn-secondary btn-sm"&gt;添加折扣&lt;/button&gt; &lt;button class="btn btn-warning btn-sm"&gt;添加折扣率&lt;/button&gt; &lt;button class="btn btn-danger btn-sm" @click="removeIncoiceItem(index)"&gt;X&lt;/button&gt; &lt;/div&gt; &lt;div class="row" style="margin-top:20px;"&gt; &lt;div class="col-md-2"&gt; &lt;input type="text" placeholder="描述"&gt; &lt;/div&gt; &lt;div class="col-md-2"&gt; &lt;button class="btn btn-danger btn-sm"&gt;删除描述&lt;/button&gt; &lt;/div&gt; &lt;div class="col-md-3"&gt; &lt;div class="input-group"&gt; &lt;input type="text" placeholder="折扣值"&gt; &lt;select class="form-select-new"&gt; &lt;option value="dollar"&gt;美元&lt;/option&gt; &lt;option value="percent"&gt;&amp;&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="col-md-1"&gt; &lt;button class="btn btn-danger btn-sm"&gt;删除折扣&lt;/button&gt; &lt;/div&gt; &lt;div class="col-md-2"&gt; &lt;input type="text" placeholder="折扣率"&gt; &lt;/div&gt; &lt;div class="col-md-2"&gt; &lt;button class="btn btn-danger btn-sm"&gt;删除折扣率&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;hr&gt; &lt;/div&gt; &lt;hr&gt; &lt;div style="margin-top:10px"&gt; &lt;button class="btn btn-warning" @click="addInvoice()"&gt; 添加项目&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/div&gt;</pre> </p>

methods: {
        addInvoice() {
            this.invoiceItems.push({
                name: "",
                quantity: 0,
                unit_price: 0,
                vat_rate: 18,
                net_total: 0,
            });
        },
    },

<div class="col-md-2">
    <input type="text" v-if="item.description !== undefined" v-model="item.description" placeholder="description"> </div>

...

<button class="btn btn-primary btn-sm" @click="addDesc(index)" >Add Description</button>

...

<div class="col-md-2">
   <button class="btn btn-danger btn-sm" @click="deleteDesc(index)" >Delete Desc.</button>
</div> 

addDesc(index){
   Vue.set(this.invoiceItems[index], "description", "");
}

deleteDesc(index){
   Vue.delete(this.invoiceItems[index], "description");
}