Using route.params in the find method

[Jens-dev]

Good morning,
I'm completely new to the pinia-orm, so maybe I don't really understand something about the concept.
Or vue 3 + router 4, is playing me some tricks.
But I don't quite understand why I can't use a route parameter in the find() method.
I can get the ID in the console, so it's available.
But my model is always null. If I hard code the ID, I can retrieve the record as expected.

Any ideas?

<script setup>
import { useRoute } from "vue-router";
import {onMounted, ref} from "vue";
import { useRepo } from "pinia-orm";
import Pet from "@/models/Pet.js"

const route = useRoute()
const pet = ref({})

onMounted(() => {
  // works
  #pet.value = useRepo(Pet).find(2)

  // does not work
  pet.value = useRepo(Pet).find(route.params.id)
})

</script>

<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="6">{{ pet.name }}</el-col>
      <el-col :span="6">test</el-col>
    </el-row>
  </el-card>
</template>

[sergerdn]

@Jens-dev
Add a console.log statement to check whether you have the value of route.params.id. This will help you verify that the correct parameter is being passed to the function.

[CodeDredd]

If you use @sergerdn debugging solution i think you will see that your are passing a string with route.params.id instead of a number which your ids seems to be. So all you need to do is parseInt(route.params.id)

[sergerdn]

If you use @sergerdn debugging solution i think you will see that your are passing a string with route.params.id instead of a number which your ids seems to be. So all you need to do is parseInt(route.params.id)

I have an idea that the router may not be fully initialized at this point. The console.log will print something like 'undefined'."
But it is just an idea because I am fairly new to Vue.js and don't know how many things work inside Vue.js 3.

[sergerdn]

I am not sure if it is the best approach for using Vue.js 3:

<script>
import { useRoute } from "vue-router";
import { ref, watchEffect } from "vue";
import { useRepo } from "pinia-orm";
import Pet from "@/models/Pet.js";

export default {
  name: "PetDetails",
  setup() {
    const route = useRoute();
    const pet = ref({});

    // Use the "watchEffect" function to watch for changes to "route.params.id".
    // When the value changes, update the "pet" value accordingly.
    watchEffect(() => {
      if (route.params.id) {
        pet.value = useRepo(Pet).find(route.params.id);
      }
    });

    return { pet };
  },
};
</script>

<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="6">{{ pet.name }}</el-col>
      <el-col :span="6">test</el-col>
    </el-row>
  </el-card>

[sergerdn]

Or:

watchEffect(() => {
  if (route.params.id) {
    const petId = parseInt(route.params.id);
    pet.value = useRepo(Pet).find(petId);
  }
});

[Jens-dev]

@sergerdn I believe, the vue3 way is now:

watch(
    () => route.params.id,
    () => {
      // do something
    }
)

[Jens-dev]

@CodeDredd
Okay, you are totally right, I defined the ID as an int.
So if I asked with an int, I get the right model back.
That is too much of type-binding for an old PHP Guy 🤣

THX so much, great work and even better Community here