Vue.js 송장 거래, 프로젝트 푸시 입력

Question

Vue.js를 사용하여 송장 거래를 하려고 합니다. 내 질문은 다음과 같습니다. 사용자는 1개의 제품에 대한 설명을 작성하거나 요청 시 할인을 적용하기를 원할 수 있습니다. 추가하려는 항목에 관계없이 지정된 입력이 표시되기를 원합니다. (각 줄에는 하나의 설명, 할인만 포함될 수 있습니다.)

따라서 요청 시 "설명, 할인, 할인율" 버튼을 누르면 해당 행에 대한 입력이 푸시됩니다.

도움을 주셔서 진심으로 감사드립니다.

jsfiddle

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

  <섹션 클래스="컨테이너">
    

      <테이블 클래스="테이블">
        
          
            이름
            단가
            부가가치세율
            액션
          
        
      
      

        

          

            
          
          

            
          
          

            
          
          

            添加描述
            添加折扣
            添加折扣率
            X
          
          

            

              
            
            

              删除描述
            
            

              

                
                
                  미국원
                  &
                
              
            
            

              删除折扣
            
            

              
            
            

              删除折扣率
            
          
        
        <시간>
      
      <시간>
      

         添加项目
      
    
  

Answer 1

버튼을 눌렀을 때 입력 상자만 표시하려면 v-if를 사용하여 프로젝트에 해당 키가 있는지 확인해야 합니다. description에 대한 예를 제공하겠지만 원하는 입력 상자에 적용할 수 있습니다.

새 항목을 추가할 때 다음과 같이 description 추가하지 마세요.

으아악

그리고 item.description 是否存在于 description 的 input의 입력에 item.description이 있는지 확인하세요.

으아악

addDesc 메서드는 프로젝트에 키를 추가하고 비어 있는 상태로 설정합니다.

으아악

deleteDesc 메서드는 프로젝트에서 키를 완전히 제거합니다.

으아악

이제 설명 추가 버튼을 클릭하면 add description 按钮时，description 输入框将出现，当您点击 delete description 按钮时，description 입력 상자가 나타나고, 설명 삭제 버튼을 클릭하면

입력 상자가 사라집니다. 🎜