Vue.js 請求書トランザクション、プロジェクト プッシュ入力

Question

Vue.js を使用して請求書トランザクションを実行しようとしています。私の質問は次のとおりです。ユーザーは 1 つの製品の説明を書きたい場合もあれば、（リクエストに応じて）割引を適用したい場合もあります。どの項目を追加したいとしても、指定された入力が表示されるようにしたいのです。 (各行には説明と割引を 1 つだけ含めることができます)

したがって、オンデマンドで 「説明・割引・割引率」ボタンを押すと該当行の入力が押されます。

ご協力いただき誠にありがとうございます。

jsfiddle

const app = new Vue({
    el: "#アプリ",
    データ： {
        invoiceItems: [
            {
                名前： ""、
                数量: 0、
                単価: 0、
                付加価値率: 18、
                net_total: 0、
                説明： ''、
                割引値: 0、
                割引率:'米ドル'
            }、
        ]、
    }、
    メソッド: {
        addInvoice() {
            this.invoiceItems.push({
                名前： ""、
                数量: 0、
                単価: 0、
                付加価値率: 18、
                net_total: 0、
                説明： ''、
                割引値: 0、
                割引率:'米ドル'
            });
        }、
        RemoveIncoiceItem(インデックス) {
            this.invoiceItems.splice(index, 1);
        }、
    }、
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css " rel="スタイルシート">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="アプリ">
  <セクションクラス="コンテナ">
    <div class="行">
      <テーブルクラス="テーブル">
        <thead class="thead-dark">
          <tr>
            <th style="width:17%">名前</th>
            <th style="width:14%">単価</th>
            <th style="width:15%">付加価値税</th>
            <th style="width:20%">アクション</th>
          </tr>
        </頭>
      </テーブル>
      <div v-for="(品目, インデックス) invoiceItems" :key="index" style="margin-bottom: 10px">
        <div class="行">
          <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">
            <input type="text" 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-danger btn-sm">删除描写</button>
            </div>
            <div class="col-md-3">
              <div class="入力グループ">
                <input type="text" placeholder="折扣值">
                <select class="form-select-new">
                  <option value="ドル">美元</option>
                  <option value="パーセント">&</option>
                </選択>
              </div>
            </div>
            <div class="col-md-1">
              <button class="btn btn-danger btn-sm">删除折扣</button>
            </div>
            <div class="col-md-2">
              <input type="text" placeholder="折扣率">
            </div>
            <div class="col-md-2">
              <button class="btn btn-danger btn-sm">删除折扣率</button>
            </div>
          </div>
        </div>
        <時間>
      </div>
      <時間>
      <div style="margin-top:10px">
        <button class="btn btn-warning" @click="addInvoice()">项目</button>を追加
      </div>
    </div>
  </セクション>
</div>

Answer 1

ボタンが押されたときに入力ボックスのみを表示するには、v-if を使用して、プロジェクトにキーが存在するかどうかを確認する必要があります。 description の例を示しますが、必要なすべての入力ボックスに適用できます。

したがって、新しいアイテムを追加するときは、次のように description を追加しないでください:

リーリー

そして、description の input に item.description が存在するかどうかを確認します:

リーリー

addDesc メソッドはキーをプロジェクトに追加し、空に設定します。 リーリー

deleteDesc メソッドはプロジェクトからキーを完全に削除します: リーリー

ここで、

add description ボタンをクリックすると、description 入力ボックスが表示され、delete description ボタンをクリックすると、description 入力ボックスが消えます。