Vue.js 송장 거래, 프로젝트 푸시 입력
<p>Vue.js를 사용하여 송장 거래를 하려고 합니다. 내 질문은 다음과 같습니다. 사용자는 1개의 제품에 대한 설명을 작성하거나 요청 시 할인을 적용하기를 원할 수 있습니다. 추가하려는 항목에 관계없이 지정된 입력이 표시되기를 원합니다. (각 줄에는 하나의 설명, 할인만 포함될 수 있습니다.)</p>
<p>따라서 요청 시
"설명, 할인, 할인율" 버튼을 누르면 해당 행에 대한 입력이 푸시됩니다. </p>
<p>도움을 주셔서 진심으로 감사드립니다. </p>
<p>jsfiddle
<pre class="brush:js;toolbar:false;">const app = new Vue({
엘: "#앱",
데이터: {
송장항목: [
{
이름: "",
수량: 0,
단가: 0,
부가세율: 18,
순총계: 0,
설명: '',
할인_값: 0,
할인율:'usd'
},
],
},
방법: {
추가송장() {
this.invoiceItems.push({
이름: "",
수량: 0,
단가: 0,
부가세율: 18,
순총계: 0,
설명: '',
할인_값: 0,
할인율:'usd'
});
},
RemoveIncoiceItem(색인) {
this.invoiceItems.splice(index, 1);
},
},
});</pre>
<pre class="brush:html;toolbar:false;"><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="app">
<섹션 클래스="컨테이너">
<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="(item, index) 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-group">
<input type="text" placeholder="折扣值">
<select class="form-select-new">
<option value="dollar">미국원</option>
<option value="percent">&</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>
</섹션>
</p>
