How can I leave an edit form already filled out in Vuejs?-CodePudding

I have this form, is the same for add and edit, add is already finish, but I don't know how to fill in edit. The edit form is accessed through a route with the id parameter, so I need to fill it in according to the id I am accessing:

<form @submit="formSalvar">
                <div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Tag *</label>
                            <b-form-input
                                type="text"
                                v-model="tagInput"
                            >
                            </b-form-input>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Descrição: </label>
                            <b-form-input
                                type="text"
                                v-model="descricaoInput"
                            >
                            </b-form-input>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="i_nome">Grupo *</label>
                            <vue-multi-select
                                class="multi-100"
                                v-model="grupoSelecionado"
                                :options="grupoOpcoes"
                            />
                        </div>
    </form>

My datas come from Axios service, so the values of v-model and options is all in there, my function only have this:

async editar () {
    const id = this.$route.params.id;
    this.editing = !!id;

    this.variaveis = ((await this.variaveisService.listVariables()) || []);
}

Another parts from my code:

data () {
    return {
        tagInput: "",
        descricaoInput: "",

        grupoOpcoes: [],
        grupoSelecionado: [],

        loading: false,
        editing: false,
        saving: false,

        gruposService: new GruposService(), //axios service that communicates with my API
        variaveisService: new VariaveisService() //axios service that communicates with my API
    };
},

async mounted () {
    this.getOptions();

    this.editar();
},

methods: {
    async getOptions () {
        this.grupoOpcoes = ((await this.gruposService.listGroups()) || []).map(g => ({ name: g.nome, ...g }));
    },

CodePudding user response：

In mounted hook you can check if is edit route:

mounted() {
  if(this.$route.params.id) this.getData()
},

and populate data (you can consider sending whole object with route params or using vuex):

methods: {
  async getData() {
    const vari = await this.variaveisService.listVariables()
    const variaveis = vari.find(v => v.id === this.$route.params.id)
    this.tagInput = variaveis.tagInput
    this.descricaoInput = variaveis.descricaoInput
    this.grupoSelecionado = variaveis.grupoSelecionado
  }
}