I am new to VueJS and I tried to make a form using Vue and Vuetify.

I don't know what happens but after the form have been submitted twice with @submit.stop.prevent, any button on the page won't work anymore. Here is my code:

<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 >
        <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 >{{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" >
        <v-col >
          <v-row  align="center" justify="center">
            <h3>Name</h3>
          </v-row>
          <v-row  align="center" justify="center">
            <input v-model="name"  type="text" name="name" id="name" :style="{width:'20%', height:'2em'}"/>
          </v-row>
          <v-row  align="center" justify="center">
            <h3>Title</h3>
          </v-row>
          <v-row  align="center" justify="center">
            <input v-model="title"  type="text" name="title" id="title" :style="{width:'20%', height:'2em'}"/>
          </v-row>
          <v-row  align="center" justify="center">
            <h3>Comment</h3>
          </v-row>
          <v-row  align="center" justify="center">
            <input v-model="comment"  type="text" name="comment" id="comment" :style="{width:'20%', height:'2em'}"/>
          </v-row>
        </v-col>
         <div >
          <button
              
            depressed
            align="center"
            justify="space-round">
              Add Comment
         </button>
        </div>
        
      </form>
      
      <div >
        <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>

CodePudding user response：

This works perfectly fine based on your example (I can totally add more objects to stores).

<v-list-item prepend-avatar="https://cdn.vuetifyjs.com/images/lists/1.jpg">
  <v-list-item-title>{{store.cTitle}}</v-list-item-title>
  <span >{{store.cName}}</span> &mdash; {{store.cComment}}
</v-list-item>

There is no such thing as <template v-slot:subtitle> tho, as shown here.
So removing it solves the issues and prints the content.

Further debugging could be achieved thanks to the Vue devtools.