Question

我试图将Object中的值绑定到Component的prop中，但它并不是被动的。我甚至使用$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 s。 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

出于某种原因，删除了args.ab中的初始化代码修复了它。如果有人能够就这种情况提供一些见解，我将非常感激。

beforeCreate

Vue：组件：prop =＆＃34; object [key]＆＃34;没有反应

1 个答案: