javascriptelectronvuejs3

How can I access Vue 3 props in the <script> section of my app

In this simple Vue 3 app, I would like to pass props to a component and access the values in the script section. I can't because they are undefined.

I can access values in the template section, though the first time it renders, I have a v-if guard because the value is undefined the first time it is rendered.

In this screenshot of the app, you can see the value "Floretta" properly rendered in the template, and the console.log output showing that the value of props.pdata.table is undefined immediately after the defineProps() line. (See the Component.vue code below)

enter image description here

What I've tried:

  1. Accessing props in a function called from onMounted()
  2. Reading the data file (the one that contains "Floretta") synchronously in the Electron main app

How can I get access to my data in the script section, for example to set up other parts of the UI, such as computing a list of dates displayed in a table? The dates differ depending on values in the props pdata object.

Here is the stripped down application.

App.vue:

enter image description here

Component.vue:

enter image description here

Solution

  • Here is an example of using a watcher.

    <script setup lang="ts">
const props = defineProps({ pdata: Object })

watch(() => props.pdata, () => {
  console.log('==>', props.pdata.value)
}, { deep: true })
</script>