After stumbling upon a helpful method on Stack Overflow that demonstrated how to use an enum to define an object, I decided to implement this in my Vue project.
export enum Options {
randSize = 'randomSized',
timer = 'showTimer',
randAngle = 'randomAngle',
colours = 'multiColour',
cardSize = 'cardSize',
numCards = 'numCards'
}
(parent component):
import { Options} from './util'
let options : {[key in Options]: number | boolean} = {
[Options.randSize]: true,
[Options.timer] : false,
[Options.randAngle] : true,
[Options.colours] : true,
[Options.cardSize] : 8,
[Options.numCards] : 20
}
I also found a solution (credit to this post) for changing option values:
function changeOption( option: string, value: number | boolean) {
options = {...options,[option]:value}
}
However, when attempting to utilize these options as a component property, the enum is not recognized:
(parent template):
<game-options
:options = "options"
@done-setup = "gameStarted=true"
@change-options="changeOption"
>
</game-options>
(child component):
import { ref, onMounted } from 'vue'
import { Options} from '../util'
const props = defineProps<{
options: {[key in Options]: number | boolean}
}>()
onMounted(() =>{
console.log(props.options);
let foo = props.options.randSize;
})
This results in an error message stating:
Property 'randSize' does not exist on type '{ randomSized: number | boolean; showTimer: number | boolean; randomAngle: number | boolean; multiColour: number | boolean; cardSize: number | boolean; numCards: number | boolean; }'.ts(2339)What steps can be taken to resolve this issue?