（Vue.js）methodsの処理の中のエラーについて

Question

vue.jsでチャットを作成しています。

<div id="app">
      <h1>ひとことチャット</h1>
      <ul>
        <li v-for="(chats in chat"> 
          {{chats.name}}
          <button @click="deletechat()">X</button>
        </li>
      </ul>

     <input type=text v-model="msg"
     placeholder=メッセージを入力>
     <button @click="addchat()">送信する</button>

var app = new Vue({
    el:　'#app',
    data:{
      msg: '',
      chat:''
    },
    

    methods: {
    addchat(){
      collection.add({
        name: this.msg,
        created: firebase.firestore.FieldValue.serverTimestamp()
      });
      this.msg = '';
      collection.orderBy('created').onSnapshot(querySnapshot =>{
      const obj = {}
      querySnapshot.forEach(doc=>{
        obj[doc.id]= doc.data()
      })
      this.chat = obj
      })
    },
    deletechat:function(){
      this.collection.delete();
    }
    

    }
  });

　[x]button押下時に発生するdeletechatで Error in v-on handler: "TypeError: Cannot read property 'delete' of undefined" のようなエラーが発生して、悩んでます。
どう解決したらいいでしょうか？よろしくお願いします。

Answer 1

<div id="app">
      <h1>ひとことチャット</h1>
      <ul>
        <li v-for="(chats,key) in chat" > 
          {{chats.name}}
          <button @click="deletechat(key)">X</button>
        </li>
      </ul>

deletechat: function(key){
      collection.doc(key).delete();
      }

繰り返し処理で「key」を追加して、vueの関数オブジェクトにも「key」を追加したら改善しました。

Answer 2

見た限りでは
this.collection
が存在していないようです