时间戳

首页 > 解决方案 > 进行简单的重新分配后数据属性不再反应？

vue.js - 进行简单的重新分配后数据属性不再反应？

问题描述

我有一个名为 data 属性current_room，最初它有一个空 object {}。

我有一个将current_room作为“道具”接收的组件。

在父组件中，在mounted()钩子中，会发生重新分配：this.current_room = new_room

在子组件中，current_room道具似乎是......一个空对象。在父组件中，它不是一个空对象，它有我希望看到的数据。

完成这项工作的正确方法是什么？在这种情况下，似乎简单的重新分配不起作用，一旦我在数据对象上定义了一个属性......并且该属性是一个对象......我必须向对象添加/删除属性，而不是不仅仅是将新对象批发重新分配给该数据属性。

标签： vue.js

解决方案

我想这只是您代码中某个地方的一个简单错误。因为按照您的问题-它应该可以工作，此外，我创建了一个简单的示例，在其中定义了您所描述的组件和功能-并且它可以工作。我将提供异步示例以确保您 100% 确定。

这是工作示例：

应用程序.vue

<template>
  <div id="app">
    <CurrentRoom :room="current_room" />
  </div>
</template>

<script>
import CurrentRoom from './components/CurrentRoom.vue'

export default {
  name: "App",
  components: {
    CurrentRoom
  },
  data () {
    return {
      current_room: {}
    }
  },
  mounted () {
    setTimeout(() => {
      this.current_room = {
        door: true,
        windowsCount: 2,
        wallColor: 'white',
        members: [
          {
            name: 'Heisenberg',
            age: 46
          },
          {
            name: 'Pinkman',
            age: 26
          }
        ]
      }
    }, 2000)
  }
};
</script>

当前房间.vue

<template>
  <div>
    Current room is: <br>
    <pre>{{ room }}</pre>
  </div>
</template>

<script>
  export default {
    name: 'CurrentRoom',
    props: {
      room: {
        type: Object,
        default: () => {}
      }
    }
  }
</script>

Codesandbox 演示：

https://codesandbox.io/s/epic-banach-clyz4

最后，根据您的问题：

... What would be the proper way to make this work? ...

答案是 - '请将您的代码与提供的示例进行比较'

推荐阅读