Блог

Мне нужно удалить один документ из firebase, нажав на его значок. Проблема в том, что я не знаю, как пометить конкретный идентификатор каждого документа в vuetify

это моя карточка (1 карточка на 1 проект)

   <v-card flat v-for="project in projects" :key="project.title">
    <v-layout row wrap :class="`pa-3 project ${project.status}`">
      <v-flex xs12 md6>
        <div class="caption grey--text">Project title</div>
        <div>{{ project.title }}</div>
      </v-flex>
      <v-flex xs6 sm4 md2>
        <div class="caption grey--text">Person</div>
        <div>{{ project.person }}</div>
      </v-flex>
      <v-flex xs6 sm4 md2>
        <div class="caption grey--text">Due by</div>
        <div>{{ project.due }}</div>
      </v-flex>
      <v-flex xs2 sm4 md2>
      <v-btn flat color='red' slot='activator' class='right mx-0 my-0' @click='deleteProject()'>
      <v-icon>delete</v-icon>
     </v-btn>
        <div>
          <v-chip small :class="`${project.status} white--text caption mx-0`">{{ project.status}}</v-chip>
        </div>
      </v-flex>
    </v-layout>
    <v-divider></v-divider>
  </v-card>
  

И этим методом я пытаюсь написать

 deleteProject() {
  console.log('deleted');
  let idP = element.id; // obviously that i have problem with this line
  db.collection('projects').doc(idP).delete()
}
  

Я думаю, что вы выполняете выборку projects из firebase , и вы всегда будете получать идентификатор для документа firebase, который вы извлекаете. Вы должны сохранить это id вместе с остальными значениями. После этого, когда вы вызываете свою deleteProject функцию, вы можете передать свою Id в эту функцию следующим образом.

 <v-btn flat color='red' slot='activator' class='right mx-0 my-0' @click='deleteProject(project.Id)'>
  

И затем получите идентификатор в вашей функции следующим образом

 deleteProject(Id) {
  console.log('deleted');
  db.collection('projects').doc(Id).delete()
}
  

Надеюсь, это решит вашу проблему.