Question

我有一个组件，其中有一个location对象为props。我传入的参数是locations[index]，它是locations数组中的选定项。

但是，index发生更改时，组件无法做出反应。如在演示中所见，单击按钮时JSON会发生更改，但是组件无法更新。

使组件具有反应性的最佳方法是什么？

Answer 1

您的location组件仅在province挂钩中填充city和mounted数据属性。当location道具更改时，mounted钩子将不再被调用，因此您将拥有陈旧的数据。

改为使用计算属性：

computed: {
  province() {
    return this.location.province;
  },
  city() {
    return this.location.city;
  }
}

Updated codepen

如果您确实确实要求province和city为数据属性（而非计算属性），那么您将需要观看location道具来更新属性：

data() {
  return {
    province: null,
    city: null
  }
},
watch: {
  location: {
    immediate: true,
    handler(loc) {
      this.province = loc.province;
      this.city = loc.city;
    }
  }
}

Answer 2

道具 location 中的嵌套项目不会是响应式的，您需要使用类似 lodash deepClone 的东西：

<location :location.sync="_.deepClone(loc)"></location>

就是这样，不需要观察者或其他任何东西。

Vue：如何使传递给组件的对象具有反应性？

2 个答案: