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); }、 }、 }); 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
ボタンが押されたときに入力ボックスのみを表示するには、
v-ifを使用して、プロジェクトにキーが存在するかどうかを確認する必要があります。descriptionの例を示しますが、必要なすべての入力ボックスに適用できます。したがって、新しいアイテムを追加するときは、次のように
リーリーdescriptionを追加しないでください:そして、
リーリーdescriptionのinputにitem.descriptionが存在するかどうかを確認します:addDescメソッドはキーをプロジェクトに追加し、空に設定します。 リーリーdeleteDesc
ここで、メソッドはプロジェクトからキーを完全に削除します:リーリーadd description
ボタンをクリックすると、description入力ボックスが表示され、delete descriptionボタンをクリックすると、description入力ボックスが消えます。