Vue方法在按鈕單擊時調用兩次

Question

我試圖使用Vue輸入來記錄一些簡單的數據，但由於某種原因，按鈕調用的方法add()被調用兩次。

<el-steps :active="addItem.count" finish-status="success" class="form-items" style="padding-left: 0px"> 
     <el-step title="category"></el-step> 
     <el-step title="subcategory"></el-step> 
     <el-step title="data"></el-step> 
    </el-steps> 
    <el-form ref="form" :model="addItem" label-width="120px" style="padding: 20px;"> 
     <el-input :placeholder="placeholder" v-model="addItem.text"></el-input> 
     <div id="add-item-buttons"> 
     <el-form-item class="form-items"> 
      <el-button type="primary" @click="add">Create</el-button> 
      <el-button>Clear</el-button> 
     </el-form-item> 
     </div> 
    </el-form> 

<script> 
export default { 

    methods: { 
    add(){ 
     switch(this.addItem.count){ 
     case 1: 
      this.addItem.category = this.addItem.text; 
      console.log('category set to: ' + this.addItem.category); 
      this.addItem.text = ''; 
      this.addItem.count++; 

     case 2: 
      this.addItem.subcategory = this.addItem.text; 
      console.log('category set to: ' + this.addItem.subcategory); 
      this.addItem.text = ''; 
      this.addItem.count++; 
     case 3: 
      if (this.addItem.kks.show){ 
      this.addItem.kks.name = this.addItem.text; 
      } 
      if (this.addItem.document.show){ 
      this.addItem.document.name = this.addItem.text; 
      } 
      if (this.addItem.product.show){ 
      this.addItem.product.name = this.addItem.text; 
      } 
     } 

    }, 
    computed: { 
    placeholder: function(){ 
     switch(this.addItem.count){ 
     case 1: 
      return 'ADD A CATEGORY TO YOUR ITEM'; 
     case 2: 
      return 'ADD A SUBCATEGORY TO YOUR ITEM'; 
     case 3: 
      return 'GIVE YOUR ITEM A NAME'; 
     } 
    }, 
    active: function(){ 
     return true; 
    } 
    }, 
    data() { 
    return { 
     addItem: { 
      open: false, 
      count: 1, 
      category: '', 
      subcategory: '', 
      text: '' 
      } 
     }  
... 
</style> 

下面是我在控制檯中看到，當我點擊 '創建'：

category set to: category 1 
category set to: 

編輯：原來我犯了一個錯字，並寫了「類別設置爲'我的第二個開關案例，我的意思是'子類別'。顯然，案例1和案例2正在評估中，而不是案例1的兩次。這裏是新的控制檯日誌時，它的固定：

category set to: category 1 
(unknown) subcategory set to: 

而沒有切換來添加您的類別，然後，它會直接到項目。

任何人都可以看到發生了什麼問題嗎？

Answer 1

您的switch case語句缺失中斷。

你把你的櫃檯增加一個，第二個條件也匹配。只需添加休息，你就會好起來

switch(this.addItem.count){ 
    case 1: 
     this.addItem.category = this.addItem.text; 
     console.log('category set to: ' + this.addItem.category); 
     this.addItem.text = ''; 
     this.addItem.count++; 
     break; 

    case 2: 
     this.addItem.subcategory = this.addItem.text; 
     console.log('category set to: ' + this.addItem.subcategory); 
     this.addItem.text = ''; 
     this.addItem.count++; 
     break; 
    case 3: 
     if (this.addItem.kks.show){ 
      this.addItem.kks.name = this.addItem.text; 
     } 
     if (this.addItem.document.show){ 
      this.addItem.document.name = this.addItem.text; 
     } 
     if (this.addItem.product.show){ 
      this.addItem.product.name = this.addItem.text; 
     } 
     break; 
}