Vue+Vuetify表单两次提交后页面按钮失效问题求助

我是VueJS新手，尝试使用Vue和Vuetify制作表单。使用@submit.stop.prevent="addComment"绑定提交事件后，表单提交两次后页面所有按钮都无法响应，以下是我的代码：

<template>
  <v-app>
    <v-main>
      <v-app-bar>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>My Vue App</v-app-bar-title>
      </v-app-bar>
      <v-row class="pa-6">
        <v-col
          cols="12"
          sm="6"
          offset-sm="3"
        >
          <v-card
          >
            <v-list lines="two">
              <v-list-subheader>Today</v-list-subheader>
                <li style="list-style: none;" v-for="store in stores" :key="store.id">
                  <v-list-item
                  prepend-avatar="https://cdn.vuetifyjs.com/images/lists/1.jpg"
                  >
                 
                    <template v-slot:subtitle>
                      <v-list-item-title>{{store.cTitle}}</v-list-item-title> 
                      <span class="font-weight-bold">{{store.cName}}</span> &mdash; {{store.cComment}}
                    </template>
                  </v-list-item>
                </li>            
                <v-divider inset></v-divider>
            </v-list>
            
          </v-card>
        </v-col>
      </v-row>
      <form @submit.stop.prevent="addComment" class="text-center">
        <v-col class="">
          <v-row class="mb-3 text-center" align="center" justify="center">
            <h3>Name</h3>
          </v-row>
          <v-row class="mb-3 text-center" align="center" justify="center">
            <input v-model="name" class="mb-3 border border-primary" type="text" name="name" id="name" :style="{width:'20%', height:'2em'}"/>
          </v-row>
          <v-row class="mb-3 text-center" align="center" justify="center">
            <h3>Title</h3>
          </v-row>
          <v-row class="mb-3 text-center" align="center" justify="center">
            <input v-model="title" class="mb-3 border border-primary" type="text" name="title" id="title" :style="{width:'20%', height:'2em'}"/>
          </v-row>
          <v-row class="mb-3 text-center" align="center" justify="center">
            <h3>Comment</h3>
          </v-row>
          <v-row class="mb-3 text-center" align="center" justify="center">
            <input v-model="comment" class="mb-3 border border-primary" type="text" name="comment" id="comment" :style="{width:'20%', height:'2em'}"/>
          </v-row>
        </v-col>
         <div class="text-center">
          <button
            class="mb-5"  
            depressed
            align="center"
            justify="space-round">
              Add Comment
         </button>
        </div>
        
      </form>
      
      <div class="text-center">
        <v-pagination
          v-model="page"
          :length="4"
          :total-visible="4"
        ></v-pagination>
      </div>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return{
      page:1,
      id:0,
      name:'',
      title:'',
      comment:'',
      stores:[] 
    }
  },
  methods:{
    addComment(){
      this.stores.push({ id: this.id++, cName: this.name, cTitle: this.title, cComment: this.comment })
      this.name = ""
      this.title = ""
      this.comment = ""
    }
  }
}
</script>

核心问题 #

1. 按钮默认类型触发重复提交：未指定type的按钮默认是submit类型，点击时会同时触发自身的submit行为和表单绑定的submit事件，导致重复执行提交逻辑，多次操作后破坏页面事件绑定。
2. Vuetify布局组件嵌套不规范：<v-col>直接放在表单内，没有包裹在<v-row>中，不符合Vuetify布局组件的嵌套规则，会导致DOM结构异常，引发按钮无响应问题。

修复后代码 #

<template>
  <v-app>
    <v-main>
      <v-app-bar>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-app-bar-title>My Vue App</v-app-bar-title>
      </v-app-bar>
      <v-row class="pa-6">
        <v-col cols="12" sm="6" offset-sm="3">
          <v-card>
            <v-list lines="two">
              <v-list-subheader>Today</v-list-subheader>
              <li style="list-style: none;" v-for="store in stores" :key="store.id">
                <v-list-item prepend-avatar="https://cdn.vuetifyjs.com/images/lists/1.jpg">
                  <template v-slot:subtitle>
                    <v-list-item-title>{{store.cTitle}}</v-list-item-title> 
                    <span class="font-weight-bold">{{store.cName}}</span> — {{store.cComment}}
                  </template>
                </v-list-item>
              </li>            
              <v-divider inset></v-divider>
            </v-list>
          </v-card>
        </v-col>
      </v-row>
      <form @submit.prevent="addComment" class="text-center">
        <!-- 用v-row包裹v-col，符合Vuetify布局规范 -->
        <v-row>
          <v-col>
            <v-row class="mb-3 text-center" align="center" justify="center">
              <h3>Name</h3>
            </v-row>
            <v-row class="mb-3 text-center" align="center" justify="center">
              <input v-model="name" class="mb-3 border border-primary" type="text" name="name" id="name" :style="{width:'20%', height:'2em'}"/>
            </v-row>
            <v-row class="mb-3 text-center" align="center" justify="center">
              <h3>Title</h3>
            </v-row>
            <v-row class="mb-3 text-center" align="center" justify="center">
              <input v-model="title" class="mb-3 border border-primary" type="text" name="title" id="title" :style="{width:'20%', height:'2em'}"/>
            </v-row>
            <v-row class="mb-3 text-center" align="center" justify="center">
              <h3>Comment</h3>
            </v-row>
            <v-row class="mb-3 text-center" align="center" justify="center">
              <input v-model="comment" class="mb-3 border border-primary" type="text" name="comment" id="comment" :style="{width:'20%', height:'2em'}"/>
            </v-row>
          </v-col>
        </v-row>
        <div class="text-center">
          <!-- 指定按钮类型为button，避免默认submit行为，直接绑定click事件 -->
          <button
            type="button"
            class="mb-5"  
            depressed
            align="center"
            justify="space-round"
            @click="addComment">
              Add Comment
          </button>
        </div>
      </form>
      
      <div class="text-center">
        <v-pagination
          v-model="page"
          :length="4"
          :total-visible="4"
        ></v-pagination>
      </div>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return{
      page:1,
      id:0,
      name:'',
      title:'',
      comment:'',
      stores:[] 
    }
  },
  methods:{
    addComment(){
      this.stores.push({ id: this.id++, cName: this.name, cTitle: this.title, cComment: this.comment })
      this.name = ""
      this.title = ""
      this.comment = ""
    }
  }
}
</script>

关键修复点 #

• 给按钮添加type="button"，避免触发默认的表单提交行为，改用@click直接绑定提交方法，逻辑更清晰。
• 将表单内的<v-col>用<v-row>包裹，符合Vuetify布局组件的嵌套要求，修复DOM结构异常问题。
• 简化表单事件绑定为@submit.prevent，stop修饰符在此场景下多余，prevent已足够阻止默认提交行为。

内容的提问来源于stack exchange，提问作者Dennis Ng