How to use dynamic prop type in Vue 3 script setup using defineprop and interface

Question

I'm creating a component that takes in an array of data (using typed props based on an interface) and then pass in a second prop that dynamically selects the the property I'd like to reference in the data object.

I'm using Vue 3 script setup syntax with Typescript and defineProps.

<script setup lang="ts">
interface DataRow {
   'id': number
   'height': number
   'strideLength': number
   'distanceTravelled': number
   'timestamp': Date
}

const props = defineProps<{
   data: DataRow[]
   xAxis: string 
   yAxis: string
}>
</script>

<template>
X Axis: {{ props.data[xAxis] }}
Y Axis: {{ props.data[YAxis] }}
<pre>
{{ data }}
</pre>
</template>

I'm trying to pass in one of the interface properties so that I can dynamically select what I'm displaying on the x/y axis of a plot. Currently, I'm using a string but I'm getting linter errors given that it's untyped.

const props = defineProps<{
   data: DataRow[]
   xAxis: string  <- this should only be properties of my DataRow interface
   yAxis: string <- this should only be properties of my DataRow interface
}>

<my-component
:data="[{id: 1, height: 2, strideLength: 0.5, distanceTravelled: 5, timestamp: new Date()}]"
:xAxis="timestamp"
:yAxis="height" />

Is there a better way of doing this?

Boussadjra Brahim · Accepted Answer · 2022-09-04 13:01:20Z

1

Try to use the keyof Type Operator :

<script setup lang="ts">
interface DataRow {
   'id': number
   'height': number
   'strideLength': number
   'distanceTravelled': number
   'timestamp': Date
}

const props = defineProps<{
   data: DataRow[]
   xAxis: keyof DataRow
   yAxis: keyof DataRow
}>
</script>

<template>
X Axis: {{ props.data[xAxis] }}
Y Axis: {{ props.data[YAxis] }}
<pre>
{{ data }}
</pre>
</template>

answered Sep 4, 2022 at 13:01

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

How to use dynamic prop type in Vue 3 script setup using defineprop and interface

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related