Vue: Component :prop="object[key]" aren't reactive

Question

I'm trying to bind a value from an Object into the prop of a Component, but it isn't reactive. I'm even using $this.set, but it doesn't work at all. Here's 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>

Here, tickedEmoji is an Object with keys being strings, and values being Booleans. tickEmoji just sets tickedEmoji[name] for that name to be true:

  methods: {
    tickEmoji (name) {
      this.$set(this.tickedEmoji, name, true)
    }
  },

That method gets called fine, but the Component doesn't notice the changes.

Child component:

<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>

What am I doing wrong here? The child component never gets updated whenever tickEmoji is called.

slice slice · Accepted Answer · 2017-09-12T02:24:47

For some reason, removing this initialization code in my beforeCreate fixed it. If someone could provide some insight on why this is the case, I would greatly appreciate it.

  async beforeCreate () {
    let {blobs} = await (await fetch('http://localhost:3000/api/blobs')).json()

    // init tickedEmoji map (fixes code when this loop is removed)
    for (let key of blobs) {
      this.tickedEmoji[key] = false
    }

    this.emoji = blobs
  }

Vue: Component :prop="object[key]" aren't reactive

1 Answers