Access props object properties Vue 3 + TS

Question

I'm having trouble accessing the properties of my sent object from my parent component. In my child component, I would like to access "found" in the object "lettersState" (see code below). When I try to access "found" in my child component. refer the error message

Property 'found' does not exist on type 'Object'.

parent component :

const state = reactive({
  guesses: ['', '', '', '', '', ''],
  solution: '',
  currentRow: 0,
  lettersState: {
    found: [] as string[],
    miss: [] as string[],
    hint: [] as string[],
  }
})

<template>
  <Keyboard @handleKeyboard="handleKeyboard" :lettersState="state.lettersState" />
</template>

child :

const props = defineProps<{lettersState:Object}>()
console.log(props.lettersState.found)

Moritz Ringler · Accepted Answer · 2023-02-01 13:42:05Z

1

const props = defineProps<{lettersState:Object}>()

tells typescript that your props look like this:

{
  lettersState: {}
}

But looking at :lettersState="state.lettersState" you want it to be:

type LetterState = {
  found: string[]
  miss: string[]
  hint: string[]
}
const props = defineProps<{letterState: LetterState}>()

answered Feb 1, 2023 at 13:42

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luciano · Accepted Answer · 2023-02-01 13:45:26Z

1

You're passing :lettersState="state.lettersState", and then you access console.log(props.lettersState.found). If you look closer, you can see that letterState does not exist in what you passed as a prop: You only passed the value corresponding to letterState. Therefore, there is no need to access the letterState key. Try this:

const props = defineProps<{
    found: string[],
    miss: string[],
    hint: string[]
  }>()
console.log(props.found)

answered Feb 1, 2023 at 13:45

Luciano

3841 silver badge7 bronze badges

1 Comment

FeckNeck Over a year ago

I didn't know you could do that, thanks for the answer !

Collectives™ on Stack Overflow

Access props object properties Vue 3 + TS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related