How to set data into v-autocomplete on edit/view form

Question

I'm trying to bring some data from a parent to a modal, where are 2 inputs one it's a v-autocomplete, but it is not showing the selected data.

As you can see there is a data coming from the function getDepartamentos, it is also coming an object categorias: {id: 1, nome: "Arroz", id_departamento: 3 } from the parent, but it's not selected on my v-autocomplete. The id_departamento in my categoria is 3, and the departamentos has the related ID and the nome as it should show.

This data is coming from a list of categorias and I want to show it to edit and show.

Here is the code:

<v-autocomplete
   v-model="dadosCategoria.id_departamento"
   :items="departamentos.flat()"
   item-text="nome"
   item-value="id"
   label="Departamento"
   name="id_departamento"
   :rules="id_departamento_Rules" />

<script>
....
data() {
  return {
    loader: false,
    dadosCategoria: {
      id: 0,
      nome: '',
      id_departamento: 0,
    },
    departamentos: {},
  };
}
.....
created() {
  this.$root.$on('open-modal-categoria', (categoria) => {
    this.visible = true;
    if (categoria) {
      this.dadosCategoria = categoria;
    }
  });
},
mounted() {
  this.getDepartamentos();
},

Are there any errors? One potential problem is your doing `.flat()` on `departamentos` which is initially defined as an object. As far as I know, `.flat()` is only for arrays. — Shoejep, Mar 18 '21 at 11:53

score 0 · Accepted Answer · answered Mar 18 '21 at 19:23

0

I just found out that is coming an string as id of departamento, so I just made the parseInt() in the variable this.dadosCategoria.id_departamento;

answered Mar 18 '21 at 19:23

jessica_st

43
5

How to set data into v-autocomplete on edit/view form

1 Answers1