My Vuetify Switch not change his value?

Question

I have a vuetify switch that should receive value from the API True or False.

The API returns True, but the Switch always shows False.

<v-switch label="Habilitado">{{props.item.habilitado}}</v-switch>

The switch is inside an a vuetify data table with others values. The other values receive data, but seems the switch not.

My items in data() return:

   items:[{
    habilitado: "",
}],

In Postman shows True the value

My axios Get Method:

    cargarTanques(){
    axios
  .get("http://localhost:58209/api/Tanque/GetTanques", {
    headers: {
      Authorization: "Bearer " + localStorage.getItem("token")
    }
  })
  .then(response => {
    console.log(response);
    this.items = response.data;
    //this.snackbar = true;
    //this.textSnackbar = "Se han cargado correctamente las estaciones";
  })
  .catch(error => {
    console.log(error.response);
    this.snackbar = true;
    this.textSnackbar =
      "Lo sentimos, no pudimos cargar la información de los tanques";
  });
},

Thank you

EDIT

The class which receives the value has: public bool Habilitado {get; set;}

Answer 1

I had this same issue and it was because my app was not inside a v-app tag.

Vuetify issue with v-menu

Answer 2

<v-switch v-model="props.item.habilitado" label="Habilitado" />

I assume the "props" comes from a scoped slot

Answer 3

It appears that you are setting the field as a string with " " instead of a boolean which could be set to null and then when updated by the API would update to a boolean. Switches use boolean values.

https://vuetifyjs.com/en/components/selection-controls#switches-boolean

Answer 4

Try to wrap your application with v-app instead normal div. Fixed for me.