Vue.js发票交易,项目推送输入
P粉561749334
P粉561749334 2023-08-30 23:57:40
[Vue.js讨论组]
<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>
P粉561749334
P粉561749334

全部回复(1)
P粉421119778

要在按下按钮时仅显示输入框,您应该使用 v-if 并检查项目中是否存在该键。 我将为 description 提供一个示例,但您可以将其应用于所有想要的输入框。

因此,当您添加新项目时,不要添加 description,如下所示:

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

并检查 item.description 是否存在于 descriptioninput 中:

<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 方法将向项目添加该键并将其设置为空:

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

deleteDesc 方法将完全从项目中删除该键:

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

现在,当您点击 add description 按钮时,description 输入框将出现,当您点击 delete description 按钮时,description 输入框将消失。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号