Olá!
Quando eu faço reload da página aparece um runtime error que não consigo perceber como corrigir. É relacionado à minha view Tarefas.vue. Poderiam ver se conseguem me ajudar?
<template>
<Formulario @aoSalvarTarefa="salvaTarefa" />
<div class="lista">
<div class="field">
<p class="control has-icons-left">
<input
class="input"
type="text"
placeholder="Digite para filtrar"
v-model="filtro"
/>
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</p>
</div>
<Tarefa
v-for="(tarefa, index) in tarefas"
:key="index"
:tarefa="tarefa"
@aoTarefaClicada="adicionarTarefa"
/>
<Box v-if="listaEstaVazia && !filtro">
Você não está muito produtivo hoje! :(
</Box>
<Box v-else-if="listaEstaVazia && filtro">
Nenhum resultado encontrado
</Box>
<div
class="modal"
:class="{ 'is-active': tarefaSelecionada }"
v-if="tarefaSelecionada"
>
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Editando uma tarefa</p>
<button
@click="fecharModal"
class="delete"
aria-label="close"
></button>
</header>
<section class="modal-card-body">
<div class="field">
<label for="descricaoDaTarefa" class="label"> Descrição </label>
<input
type="text"
class="input"
v-model="tarefaSelecionada.descricao"
id="descricaoDaTarefa"
/>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success" @click="alterarTarefa">
Salvar alterações
</button>
<button @click="fecharModal" class="button">Cancelar</button>
</footer>
</div>
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref, watchEffect } from "vue";
import { useStore } from "@/store";
import Formulario from "../components/Formulario.vue";
import Tarefa from "../components/Tarefa.vue";
import ITarefa from "../interfaces/ITarefa";
import Box from "../components/Box.vue";
import { TipoNotificacao } from "@/interfaces/INotificacao";
import { notificacaoMixin } from "@/mixins/notificar";
import {
ALTERAR_TAREFA,
CADASTRAR_TAREFA,
OBTER_PROJETOS,
OBTER_TAREFAS,
} from "@/store/tipo-acoes";
export default defineComponent({
name: "tarefas-view",
components: {
Formulario,
Tarefa,
Box,
},
data() {
return {
tarefaSelecionada: null as ITarefa | null,
};
},
mixins: [notificacaoMixin], //reusing code by mixins
computed: {
listaEstaVazia(): boolean {
return this.tarefas.length === 0;
},
},
methods: {
salvaTarefa(tarefa: ITarefa): void {
if (tarefa.projeto == undefined) {
this.notificar(
TipoNotificacao.FALHA,
"Não foi possível adicionar tarefa.",
"A tarefa precisa estar relacionada a algum projeto."
);
return;
}
this.store.dispatch(CADASTRAR_TAREFA, tarefa);
this.notificar(
TipoNotificacao.SUCESSO,
"Tarefa adicionada.",
"A tarefa foi incluída na lista."
);
},
adicionarTarefa(tarefa: ITarefa) {
this.tarefaSelecionada = tarefa;
},
fecharModal() {
this.tarefaSelecionada = null;
},
alterarTarefa() {
this.store
.dispatch(ALTERAR_TAREFA, this.tarefaSelecionada)
.then(() => this.fecharModal());
},
},
setup() {
const store = useStore();
const filtro = ref("");
store.dispatch(OBTER_TAREFAS);
store.dispatch(OBTER_PROJETOS);
const tarefas = computed(() =>
store.state.tarefa.tarefas.filter(
(t) => !filtro.value || t.descricao.includes(filtro.value)
)
);
return {
store,
filtro,
tarefas,
};
},
});
</script>