Update data in JSON with Vue.js

Question

I have a small JSON called "users"

[
  {
    "id": 1,
    "name": "Arthur",
    "data": "1998-11-22",
    "email": "[email protected]",
    "departamento": "Vendas"
  }
]

And another JSON called "departments"

[
  {
    "id": 1,
    "departamento": "Vendas",
    "descricao": "O vendedor funciona como uma ligação da organização com o seu cliente."
  }
]

When I add a new user has a <select> showing all departments, I pull these departments directly from JSON, Below is my Change Function

update(form){
        return axios.put('http://localhost:3000/departamentos/' + form.id , {
           departamento: this.form.departamento,
           descricao: this.form.descricao
        }).then(res => {
            this.load()
            this.form.id = ''
            this.form.departamento = ''
            this.form.descricao = ''
            this.updateSubmit = false
            alert("Departamento alterado");
        }).catch((err) => {
            console.log(err);
        })
    }

---

I can change the "department" of JSON "departments" normally. The problem is in JSON "users". users.department, it is not updated. Briefly, I add a user with Sales department, change the department name to HR and the user department continues Sales Can someone help me?

Answer 1

Vue does not deep watch variables. In other words, your arrayDeUsers has been checked once and the property of an object in its Intel has been changed (arrayDeUsers[indice].departamento) and that doesn’t make Vue know that he has to update that piece of HTML.

My suggestion, by which you provided code, create a computed variable and return something +- like this return usuarios.map(usuario => usuario.departamento);

So every time you change the department it will reflect on the screen.