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