Vue：組件：prop =“ object [key]”不起作用

Question

我正在嘗試將Object的值綁定到Component的prop中，但是它不是被動的。 我什$this.set在使用$this.set ，但它根本不起作用。 這是我的模板：

<div class="grid">
  <emoji-card v-for="name in shuffledEmoji"
    :name="name" :ticked="tickedEmoji[name]" :key="name"      
    @click="tickEmoji(name)"
  />
</div>

• shuffledEmoji ： Array<String>

在這里， tickedEmoji是一個對象，鍵是字符串，值是Boolean 。 tickEmoji只是將tickedEmoji[name]為true ：

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

該方法被稱為罰款，但組件不會注意到所做的更改。

子組件：

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

我在這里做錯了什么？ 每當tickEmoji時，子組件就永遠不會更新。

Answer 1

由於某種原因，在我的beforeCreate刪除了此初始化代碼已beforeCreate修復。 如果有人可以提供關於這種情況的一些見解，我將不勝感激。

  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
  }