[RESOLVIDO] Recuperar id da rota - VUE 3

19 de outubro de 2023 19 respostas Resolvido

guilhermebhte 19 de outubro de 2023

A url chega assim http://localhost:8081/tema/2, como pegar o número 2 ?

TemaPorIdDescricao.vue

<script setup lang="ts">
import FileSelection from "@/components/forms/form-elements/fileinput/FileInputSelection.vue";
import UiParentCard from "@/components/shared/UiParentCard.vue";
import { useTemaStore } from "@/stores/apps/tema";
import { computed, onMounted, ref } from "vue";

const valid = ref(true);
let editedItem = ref({
  id: null,
  nome: null,
  callback: null,
  apresentacao: null,
  ativo: true,
  jdate: null,
  role: null,
  rolestatus: null,
});

const store = useTemaStore();
onMounted(() => {
  store.buscaPorId(3);
});

const getTema = computed(() => {
  return store.temaPorId;
});
ref(getTema);
</script>
<template>
  <v-row>
    <v-col cols="12" md="12">
      <UiParentCard title="Temas de Estudo">
        <v-form ref="form" v-model="valid" lazy-validation>
          <v-row>
            <v-col cols="12" sm="5">
              <v-text-field
                variant="outlined"
                hide-details
                v-model="editedItem.nome"
                label="Nome"
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="4">
              <v-text-field
                variant="outlined"
                hide-details
                v-model="editedItem.callback"
                label="Callback chat telegram"
                aria-readonly="true"
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="2">
              <v-switch
                color="primary"
                v-model="editedItem.ativo"
                hide-details
                label="Ativo ?"
              ></v-switch>
            </v-col>
            <v-col cols="12" sm="4">
              <FileSelection label="Imagem ilustrativa" />
            </v-col>
            <v-col cols="12" sm="12">
              <v-textarea
                variant="outlined"
                hide-details
                label="Apresentação"
                v-model="editedItem.apresentacao"
                rows="5"
              ></v-textarea>
            </v-col>
          </v-row>
        </v-form>
      </UiParentCard>
    </v-col>
  </v-row>
</template>

Como preencher as informações que vem do backend no formulário ?

19 Respostas

rodriguesabner 19 de out. de 2023 1 like

Dá uma melhorada no título, é um bom tópico, então se no futuro alguém quiser procurar pela mesma coisa, pode procurar por uma palavra chave.

Começa mostrando suas rotas, mais especificamente essa /tema/:id

Essa já é outra questão tb né, mas vc pode criar uma funcao que chama o endpoint do back e chamar no onMounted.

guilhermebhte 19 de out. de 2023

A função já existe, certo ?

onMounted(() => {
  store.buscaPorId(3);
});

guilhermebhte 19 de out. de 2023

MainRoutes

const MainRoutes = {
  path: "/main",
  meta: {
    requiresAuth: true,
  },
  redirect: "/main",
  component: () => import("@/layouts/full/FullLayout.vue"),
  children: [
    {
      path: "/",
      redirect: "/dashboards/analytical",
    },
    {
      name: "Por tema",
      path: "/analise-tema",
      component: () => import("@/views/apps/analise-tema/AnaliseTema.vue"),
    },
    {
      name: "Análise Tema de Estudo",
      path: "/analise-tema/:id",
      component: () => import("@/views/apps/analise-tema/AnaliseTemaPorId.vue"),
    },
    {
      name: "Temas",
      path: "/tema",
      component: () => import("@/views/apps/tema/Tema.vue"),
    },
    {
      name: "Análise Tema",
      path: "/tema/:id",
      component: () => import("@/views/apps/tema/TemaPorId.vue"),
    },
    {
      name: "Sub tema análise Tema",
      path: "/tema/:id",
      component: () => import("@/views/apps/sub-tema/SubTema.vue"),
    },
  ],
};

export default MainRoutes;

rodriguesabner 19 de out. de 2023 1 like

sim, já existe. Essa função ja ta pegando do backend? Se tiver, não entendi a sua dúvida…

Vc não pode ter duas rotas com o mesmo path. Só uma dessas duas aí ta sendo utilizada de vdd… E vc pode pegar o :id assim:

{{ $route.params.id }}

guilhermebhte 19 de out. de 2023

Tenho este edit

let editedItem = ref({
  id: null,
  nome: null,
  callback: null,
  apresentacao: null,
  ativo: true,
  jdate: null,
  role: null,
  rolestatus: null,
});

Aqui busca do backend

const store = useTemaStore();
onMounted(() => {
  store.buscaPorId(3);
});

Ai preciso preencher o que vem do backend no formulario abaxo:

<v-form ref="form" v-model="valid" lazy-validation>
          <v-row>
            <v-col cols="12" sm="5">
              <v-text-field
                variant="outlined"
                hide-details
                v-model="editedItem.nome"
                label="Nome"
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="4">
              <v-text-field
                variant="outlined"
                hide-details
                v-model="editedItem.callback"
                label="Callback chat telegram"
                aria-readonly="true"
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="2">
              <v-switch
                color="primary"
                v-model="editedItem.ativo"
                hide-details
                label="Ativo ?"
              ></v-switch>
            </v-col>
            <v-col cols="12" sm="4">
              <FileSelection label="Imagem ilustrativa" />
            </v-col>
            <v-col cols="12" sm="12">
              <v-textarea
                variant="outlined"
                hide-details
                label="Apresentação"
                v-model="editedItem.apresentacao"
                rows="5"
              ></v-textarea>
            </v-col>
          </v-row>
        </v-form>

rodriguesabner 20 de out. de 2023

vc precisa passar o $route.params.id onde está o 3.

e pra preencher os dados que tão vindo, é só ir preenchendo esse ref aí.

//acredito q buscaPorId retorna algo
const data = store.buscaPorId(3);
editedItem.nome.value = data.nome; 
//e assim sucessivamente

guilhermebhte 20 de out. de 2023

Sobre pegar o valor da rota, consegui assim:

import { router } from "../../../router";
const store = useTemaStore();
onMounted(() => {
     store.buscaPorId(Number(router.currentRoute.value.params.id));
});

rodriguesabner 20 de out. de 2023 1 like

ué, pq preferiu dar essa volta toda ao invés de usar o this.$route?

guilhermebhte 20 de out. de 2023

porque o this.$route não funcionou

rodriguesabner 20 de out. de 2023

qual erro deu? printa o que ta vindo dentro de this.$route

guilhermebhte 20 de out. de 2023

rodriguesabner 20 de out. de 2023 1 like

console.log(this.$route)

Solucao aceita

rodriguesabner 20 de out. de 2023 1 like

lembrei agora que vc tá usando o vue3…

import {useRouter} from "vue-router";
const router = useRouter()

//onMounted
const id = router.currentRoute.value.params.id
console.log(id);

guilhermebhte 20 de out. de 2023

Não funcionou assim. Está com este erro tambem

rodriguesabner 20 de out. de 2023 1 like

Com o useRouter não funcionou?

Foi mal, inverti… O correto é editedItem.value.nome

guilhermebhte 20 de out. de 2023

Sim. Foi o que eu coloquei aqui.

guilhermebhte 20 de out. de 2023

Aconteceu isto.

rodriguesabner 20 de out. de 2023 1 like

onMounted(async () => {
   const info = await store....
})

guilhermebhte 20 de out. de 2023

@rodriguesabner

obrigado

Resolvido em

<script setup lang="ts">
import FileSelection from "@/components/forms/form-elements/fileinput/FileInputSelection.vue";
import UiParentCard from "@/components/shared/UiParentCard.vue";
import { useTemaStore } from "@/stores/apps/tema";
import { onMounted, ref } from "vue";
import "vue3-easy-data-table/dist/style.css";
import { router } from "../../../router";

const valid = ref(true);
let editedItem = ref({
  id: 0,
  nome: "",
  callback: "",
  apresentacao: "",
  ativo: true,
  jdate: "",
  role: "",
  rolestatus: "",
});

const store = useTemaStore();
onMounted(async () => {
  const informacao = await store.buscaPorId(
    Number(router.currentRoute.value.params.id)
  );
  editedItem.value = informacao;
});
</script>

Criado 19 de outubro de 2023

Ultima resposta 20 de out. de 2023

Respostas 19

Participantes 2

19 Respostas

Topicos relacionados