Rap sheet on top of each other!

Question

I have a problem. I’m using the lokijs with vuejs, to register a user via modal, so far so good, only that every time I register a new user, this new registration replaces the old one. How do I fix it?

RENDERER

var loki = require('lokijs');
var db = new loki('loki.json');
var clientes = db.addCollection('clientes');

    function mounted(fn) {
        if(document.readyState != 'loading'){
            fn();
        }else{
            document.addEventListener('DOMContentLoaded', fn);
        }
    }

    mounted(function(){
        document.querySelector('#salvar').addEventListener('click', function(e){
                e.preventDefault();
                let data = {
                    nome:document.querySelector('#nome').value,
                    cpf:document.querySelector('#cpf').value,
                    endereco:document.querySelector('#endereco').value,
                    telefone:document.querySelector('#nome').value,
                    placa:document.querySelector('#placa').value,
                    compania:document.querySelector('#compania').value

                };
                clientes.insert(data);
                db.save();
                alert('Cadastrado com sucesso');
                document.querySelector('#cadastro-cliente').reset()

        })
    })

HTML

<script>
    require('./renderer.js');
    var read = require('read-file-utf8')
    var loki = require('lokijs');
    var db = new loki('loki.json');
    var data = read(__dirname+'/loki.json');
    db.loadJSON(data);
    window.vue = require('vue');
    //db.loadJSON()
    var clientes = db.getCollection('clientes');
    console.log(db);

        new Vue({
          el: '#app',
          data: {
            clientes: [],
            client:{
              nome:'',
              cpf:'',
              endereco:'',
              telefone:'',
              placa:'',
              compania:''
            },
          },
          mounted: function(){
            this.clientes = clientes.data;
            console.log(this.clientes);
          },
          methods:{
            editClient: function(cliente){
             $('#myModal').modal('show');
             this.clientes.fill(cliente);
            },
            createClient:function(){
              $('#myModal').modal('show');
              this.client={
                nome:'',
                cpf:'',
                endereco:'',
                telefone:'',
                placa:'',
                compania:''
              };
              db.save();
            },
            deleteClient:function(){
              this.data.chain().remove();
            },
          }
        });
</script>

Answer 1

You are probably entering the ID of the saved item into the variables and when you try to save again, you are sending the same id. Probably. See your variables before saving the first time, what is returned after that and the variables when saving the second time.