vuejs：如何让我的数据对道具变化做出反应？答案

【问题标题】：vuejs: How can I make my data react to props change?vuejs：如何让我的数据对道具变化做出反应？
【发布时间】：2018-10-14 15:49:18
【问题描述】：

我有基本的 vue 道具和数据：

props: ['person', 'type']
data() {
  return {
    offer: {
      type: 'basic',
      person: 'nurse',
      ...

如何让我的数据对道具变化做出反应？例如，如果道具person 将是'physican' 我想要我的数据offer.person = 'physician'。否则，如果 props 值为空，我希望有默认值 offer.person。

实现这一目标的最简单方法是什么？我尝试了观察者，计算出来的，但它们似乎都不起作用。

编辑：我写了这样的东西：

  basicComputed(){
    this.offer.person = this.person
    this.offer.type = this.type      
  },

然后在模板中：

<template>
  <div>
     {{basicComputed}}
  </div>
</template>

它有效，但似乎不是一个完美的解决方案。有没有更好的方法？

【问题讨论】：

您可以在模板中直接使用props，如果这是您正在寻找的。如果您确实想在offer 变量中使用它，您可能需要查看监视/计算属性（请参阅stackoverflow.com/questions/45022705/…）
@Teun 这是一个使用观察者的好主意，但是如果父组件重新渲染会发生什么。这有点像“crate new”组件——在开始时取一个值，不要更改它

标签： vue.js

【解决方案1】：

只需将您的道具更改为一个对象，您就可以使用默认值

props: {
  person: {
    default: "some role"
  },
  type: {
    default: "basic"
  }
}

【讨论】：

感谢您的提示！我可以将其修改为优惠对象的一个元素吗？就像：props: { offer.person: { default: "some role" },
那为什么不把offer 作为道具呢？所以props: { offer: { default: {person: "some role", type: "basic" } } }
那是因为我使用 offer 数组作为我的 api 请求的位置