Urus niaga invois Vue.js, input tolak projek

Question

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css " rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <section class="container">
    <div class="row">
      <table class="table">
        <thead class="thead-dark">
          <tr>
            <th style="width:17%">Nama</th>
            <th style="width:14%">Harga Seunit</th>
            <th style="width:15%">Kadar Vat</th>
            <th style="width:20%">Tindakan</th>
          </tr>
        </kepala>
      </table>
      <div v-for="(item, indeks) dalam invoiceItems" :key="index" style="margin-bottom: 10px">
        <div class="row">
          <div class="col-md-2">
            <input type="text" v-model="item.name">
          </div>
          <div class="col-md-2">
            <input type="text" v-model="item.unit_price">
          </div>
          <div class="col-md-2">
            <jenis input="teks" v-model="item.net_total">
          </div>
          <div class="col-md-5">
            <button class="btn btn-primary btn-sm">添加描述</button>
            <button class="btn btn-secondary btn-sm">添加折扣</button>
            <button class="btn btn-warning btn-sm">添加折扣率</button>
            <button class="btn btn-danger btn-sm" @click="removeIncoiceItem(index)">X</button>
          </div>
          <div class="row" style="margin-top:20px;">
            <div class="col-md-2">
              <input type="text" placeholder="描述">
            </div>
            <div class="col-md-2">
              <button class="btn btn-bahaya btn-sm">删除描述</button>
            </div>
            <div class="col-md-3">
              <div class="input-group">
                <input type="text" placeholder="折扣值">
                <select class="form-select-new">
                  <nilai pilihan="dollar">美元</option>
                  <nilai pilihan="peratus">&</option>
                </select>
              </div>
            </div>
            <div class="col-md-1">
              <button class="btn btn-bahaya btn-sm">删除折扣</button>
            </div>
            <div class="col-md-2">
              <input type="text" placeholder="折扣率">
            </div>
            <div class="col-md-2">
              <button class="btn btn-bahaya btn-sm">删除折扣率</button>
            </div>
          </div>
        </div>
        <hr>
      </div>
      <hr>
      <div style="margin-top:10px">
        <button class="btn btn-warning" @click="addInvoice()"> 添加项目</button>
      </div>
    </div>
  </section>
</div>

Answer 1

Untuk menunjukkan hanya kotak input apabila butang ditekan, anda harus menggunakan v-if dan semak sama ada kekunci itu wujud dalam projek. Saya akan memberikan contoh untuk description tetapi anda boleh menggunakannya pada mana-mana kotak input yang anda mahukan.

Jadi apabila anda menambah item baru, jangan tambah description seperti ini:

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

Dan semak sama ada item.description wujud dalam input item.description 是否存在于 description 的 input:

<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> 

Kaedah

addDesc akan menambah kunci pada projek dan menetapkannya kepada kosong:

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

Kaedah

deleteDesc akan mengeluarkan sepenuhnya kunci daripada projek:

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

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

akan hilang. 🎜