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 ?
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.
1 curtida
A função já existe, certo ?
onMounted(() => {
store.buscaPorId(3);
});
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;
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 }}
1 curtida
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>
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
Sobre pegar o valor da rota, consegui assim:
import { router } from "../../../router";
const store = useTemaStore();
onMounted(() => {
store.buscaPorId(Number(router.currentRoute.value.params.id));
});
ué, pq preferiu dar essa volta toda ao invés de usar o this.$route?
1 curtida
porque o this.$route não funcionou
qual erro deu? printa o que ta vindo dentro de this.$route
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);
1 curtida
Não funcionou assim. Está com este erro tambem
Com o useRouter não funcionou?
Foi mal, inverti… O correto é editedItem.value.nome
1 curtida
Sim. Foi o que eu coloquei aqui.
onMounted(async () => {
const info = await store....
})
1 curtida
@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>
