Código com jquery

Fala ai André, tudo bem? Dei uma olhada no projeto e fiz algumas alterações no NegociacaoController, ele ficou assim:

class NegociacaoController {
    constructor() {
        this.tbody = $("table tbody");
        this.formulario = $(".form");
        this.formulario.submit(this.adicionaCampos);
    }

    adicionaCampos = (event) => {
        event.preventDefault();
        var data = $("#data").val();
        var quantidade = $("#quantidade").val();
        var valor = $("#valor").val();
        var volume = quantidade * valor;
        var negociacao = {
            data,
            quantidade,
            valor,
            volume,
        };

        this.tbody.append(`
        <tr>
            <td>${negociacao.data}</td>
            <td>${negociacao.quantidade}</td>
            <td>${negociacao.valor}</td>
            <td>${negociacao.volume}</td>
        </tr>
        `);
    }   
}

O que eu fiz foi no próprio construtor, após buscar o formulário, já definir o listener para quando o mesmo for submetido.

Também alterei dentro do adicionaCampos, para ele usar o tbody da classe com o this.tbody.

Por fim, transformei a função adicionaCampos em arrow function porque ela usa o contexto da classe, no caso o this para referenciar o tbody.

Espero ter ajudado.

Deu certo, muito obrigado! :)

Magina André, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.