Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Metodos Watch e WatchEffect não funcionam

Olá. Professor.

Estou com uma dificuldade que não consigo prosseguir no curso. Os metodos watch e watchEffect dentro do setup não estão funcionando ao reagir as mudanças da variavel constante filtro. Apenas o valor inicial aparece no console. Porem ao alterar o valor no input filtro nada acontece.

Código da ListaTarefas.vue

<template>
    <Formulario @aoSalvarTarefa="salvar" />
    <div class="list">
        <div class="field">
            <p class="control has-icons-left">
                <input class="input" type="text" placeholder="Filtrar tarefas" :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="selecionarTarefa" />
        <Box v-if="listaVaziaDeTarefa">
            Nenhuma tarefa criada ainda!
        </Box>
        <Modal :aberto="tarefaSelecionada" :titulo="'Editar tarefa'" :nome_botao_salvar="'Salvar alterações da tarefa'"
            :habilitar_botao_salvar="tarefaSelecionadaTemDescricao" @aoModalFechado="removerSelecaoTarefa"
            @aoModalSalvado="alterar" v-if="tarefa_selecionada">
            <div class="field">
                <label for="descricao" class="label">Descrição</label>
                <input type="text" class="input" v-model="tarefa_selecionada.descricao" id="descricao"
                    placeholder="Insira a descrição">
            </div>
        </Modal>
    </div>
</template>
<script lang="ts">
    import { defineComponent, computed, ref, watchEffect, watch } from 'vue';
    import Formulario from '../../components/Formulario.vue';
    import Tarefa from '../../components/Tarefa.vue';
    import { TipoNotificacao } from '../../interfaces/NotificacaoInterface';
    import TarefaInterface from '../../interfaces/TarefaInterface';
    import Box from '../../components/Box.vue';
    import { useStore } from '../../store';
    import { NotificacaoMixin } from '../../mixins/Notificar';
    import Modal from '../../components/Modal.vue';

    export default defineComponent({
        name: 'ListaTarefas',
        data() {
            return {
                tarefa_selecionada: null as TarefaInterface | null,
            }
        },
        computed: {
            listaVaziaDeTarefa(): boolean {
                return this.tarefas && this.tarefas.length === 0;
            },
            tarefaSelecionada(): boolean {
                return this.tarefa_selecionada != null
            },
            tarefaSelecionadaTemDescricao(): boolean {
                return this.tarefa_selecionada.descricao ? true : false;
            }
        },
        mixins: [NotificacaoMixin],
        methods: {
            salvar(tarefa: TarefaInterface) {
                this.store.dispatch('NOVA_TAREFA', tarefa)
                    .then(() => {
                        this.notificar(TipoNotificacao.SUCESSO, 'Feito!', `Tarefa cadastrada com sucesso.`);
                    })
                    .catch(() => {
                        this.notificar(TipoNotificacao.FALHA, 'Ops!', `Não foi possível cadastrar a tarefa.`);
                    })
            },
            alterar() {
                this.store.dispatch('ALTERAR_TAREFA', this.tarefa_selecionada)
                    .then(() => {
                        this.removerSelecaoTarefa();
                        this.notificar(TipoNotificacao.SUCESSO, 'Feito!', `Tarefa alterada com sucesso.`);
                    })
                    .catch(() => {
                        this.notificar(TipoNotificacao.FALHA, 'Ops!', `Não foi possível alter a tarefa.`);
                    })
            },
            selecionarTarefa(tarefa: TarefaInterface) {
                this.tarefa_selecionada = tarefa;
            },
            removerSelecaoTarefa() {
                this.tarefa_selecionada = null;
            },
        },
        components: {
            Formulario,
            Tarefa,
            Box,
            Modal
        },
        setup() {
            const store = useStore();
            store.dispatch('OBTER_TAREFAS');

            const filtro = ref("");
            // const tarefas = computed(() =>
            //     store.state.tarefa.tarefas.filter((t) => !filtro.value || t.descricao.includes(filtro.value))
            // );

            watchEffect(() => {
                console.log(filtro.value);
            })
            return {
                tarefas: computed(() => store.state.tarefa.tarefas),
                store,
                filtro,
            }
        }
});
</script>
2 respostas
solução!

Encontrei o bug, era uma coisa muito pequena que o vs code nao encontrou.

substitui no input de :v-model por v-model

Oi Thales, tudo bem?

Que bom que você conseguiu encontrar o bug. E obrigada por compartilhar com a gente a sua solução. :D

Um abraço e bons estudos.