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