Boa tarde, quando clico no botão de deletar a tarefa, só a string do ID é deletada e a tafera continua visível e não consigo achar o erro.
O link para o código: https://github.com/samrods1/AluraTracker
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Boa tarde, quando clico no botão de deletar a tarefa, só a string do ID é deletada e a tafera continua visível e não consigo achar o erro.
O link para o código: https://github.com/samrods1/AluraTracker
Salve, Samuel!
Primeiramente, fica aqui o elogio pra esse visual bacana que tu implementou no seu Tracker.
O que está acontecendo é que delete é uma palavra reservada. Ela é utilizada para remover propriedades dos objetos, por isso o seu id estava sendo deletado.
Se você quiser saber mais sobre o delete, dá uma olhada aqui na documentação.
Se você trocar o nome do método de delete para, por exemplo, destroy o seu método vai funcionar do jeito que você espera:
<template>
<section>
<router-link to="/projects/new" class="button">
<span class="icon is-small">
<i class="fas fa-plus"></i>
</span>
<span>New Project </span>
</router-link>
<table class="table is-fullwidth">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="project in projects" :key="project.id">
<td>{{ project.id }}</td>
<td>{{ project.name }}</td>
<td>
<router-link :to="`/projects/${project.id}`" class="button">
<span class="icon is-small">
<i class="fas fa-pencil-alt"></i>
</span>
</router-link>
<button class="button ml-2 is-danger" @click="destroy(project.id)">
<span class="icon is-small"> <i class="fas fa-trash"></i> </span>
</button>
</td>
</tr>
</tbody>
</table>
</section>
</template>
<script lang="ts">
import { useStore } from '@/store';
import { computed, defineComponent } from 'vue';
import { DELETE_PROJECT } from '@/store/MutationType';
export default defineComponent({
name: 'List',
methods: {
destroy (id: string) {
this.store.commit(DELETE_PROJECT, id);
},
},
setup() {
const store = useStore();
return {
projects: computed(() => store.state.projects),
store,
};
},
});
</script>Muito obrigado pelo elogio e por tirar minha duvida! Estou achando a didatica do curso excelente!
Abs.