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:

编辑：事实证明我做了一个拼写错误并为我的第二个开关案例写了'category set to'，我的意思是'子类别'。显然，案例1和案例2都在评估，而不是案例1两次。这是修复后的新控制台日志：

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

而不是切换到添加您的SUBCATEGORY，它直接进入ITEM。

有人能看出出了什么问题吗？

Answer 1

您的switch case语句缺少中断。

您将计数器增加1，第二个条件匹配。只需添加休息时间就可以了。

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

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

1 个答案: