ボタンのクリックでVueメソッドが2回呼び出される

Question

いくつかの単純なデータを記録するためにVue入力を使用しようとしていますが、何らかの理由でボタンによって呼び出されるメソッドadd()が2回呼び出されます。

<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: 

編集：結局のところ、私はタイプミスをしたと '書きましたカテゴリーは '私が'サブカテゴリ 'を意味する第2のスイッチの場合に設定されています。つまり、ケース1とケース2の両方が評価されており、ケース1では2回評価されていません。ここでは、固定の新しいコンソールログがあります：

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

し、代わりにあなたのサブカテゴリを追加するに切り替えるのは、ITEMに直進します。

誰かが間違っているのを見ることができますか？

Answer 1

スイッチのステートメントに改行がありません。

あなたはカウンターを1つ増やしています.2番目の条件は一致しています。単に休憩を追加すると、あなたは元気でしょう。

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