Vue方法在按钮单击时被调用两次

Posted 2023-02-23

【中文标题】Vue方法在按钮单击时被调用两次

【英文标题】：Vue method being called twice on button click

【发布时间】：2017-09-24 19:51:32

【问题描述】：

我正在尝试使用 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- 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: 

而不是切换到添加您的子类别，而是直接进入项目。

谁能看出发生了什么问题？

【参考方案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;

【讨论】：

谢谢！我想我需要查看 switch 语句。

很高兴能帮上忙。