I'm attempting to bind a value from an Object into the prop of a Component, but unfortunately it is not reacting as expected. Despite using $this.set, the reactivity issue persists. Below is my template:
<div class="grid">
<emoji-card v-for="name in shuffledEmoji"
:name="name" :ticked="tickedEmoji[name]" :key="name"
@click="tickEmoji(name)"
/>
</div>
shuffledEmoji:Array<String>
In this scenario, tickedEmoji is an Object with string keys and boolean values. The tickEmoji function sets tickedEmoji[name] for that specific name to be true:
methods: {
tickEmoji (name) {
this.$set(this.tickedEmoji, name, true)
}
},
The function gets triggered successfully, but the Component fails to register the changes.
Child component structure:
<template>
<div class="card" @click="$emit('click')">
<img draggable="false" :src="`/static/blobs/${name}.png`">
<img v-show="ticked" class="green-tick" draggable="false"
src="/static/ui/green_tick.png">
</div>
</template>
<script>
export default {
name: 'emoji-card',
props: ['name', 'ticked']
}
</script>
Can you identify how I am going wrong here? The child component does not reflect the updates when tickEmoji is called.