Urus niaga invois Vue.js, input tolak projek-Soal Jawab Rangkaian PHP Cina

Saya cuba melakukan transaksi invois menggunakan Vue.js. Soalan saya ialah: Pengguna mungkin mahu menulis penerangan untuk 1 produk atau mungkin mahu memohon diskaun (atas permintaan). Saya mahu input yang dinyatakan dipaparkan tidak kira item mana yang dia mahu tambah. (Setiap baris hanya boleh mempunyai satu penerangan, diskaun)

Oleh itu, atas permintaan Apabila anda menekan butang "Perihalan, Diskaun dan Kadar Diskaun", input untuk baris yang berkaitan akan ditolak.

Terima kasih banyak atas bantuan anda.

jsfiddle

const app = new Vue({ el: "#app", data: { InvoisItem: [ { nama: "", kuantiti: 0, harga_unit: 0, kadar_vat: 18, net_total: 0, keterangan: '', nilai_diskaun: 0, kadar_diskaun:'usd' }, ], }, kaedah: { addInvoice() { this.invoiceItems.push({ nama: "", kuantiti: 0, harga_unit: 0, kadar_vat: 18, net_total: 0, keterangan: '', nilai_diskaun: 0, kadar_diskaun:'usd' }); }, removeIncoiceItem(index) { this.invoiceItems.splice(index, 1); }, }, });

        Nama  Harga Seunit  Kadar Vat  Tindakan

membalas semua (1)

P粉4211197782023-08-31 15:02:18 Tingkat 1

Untuk menunjukkan hanya kotak input apabila butang ditekan, anda harus menggunakanv-ifdan semak sama ada kekunci itu wujud dalam projek. Saya akan memberikan contoh untukdescriptiontetapi anda boleh menggunakannya pada mana-mana kotak input yang anda mahukan.

Jadi apabila anda menambah item baru, jangan tambahdescriptionseperti ini:

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

Dan semak sama adaitem.descriptionwujud dalaminputitem.description是否存在于description的input:

  
 ...  ...

Kaedah

addDescakan menambah kunci pada projek dan menetapkannya kepada kosong:

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

deleteDescakan mengeluarkan sepenuhnya kunci daripada projek:

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

Sekarang, apabila anda mengklik butang tambah penerangan , kotak inputadd description按钮时，description输入框将出现，当您点击delete description按钮时，descriptionakan muncul dan apabila anda mengklik butang padam penerangan , kotak input

akan hilang.