如何在 Vue.js 中使用对象道具？

Question

vue.js 文档以这个为例：

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

但是，initialCounter 在我的模板中有效，但 counter 无效。

我做错了什么？

完整代码如下：

<update-counter initialCounter="1" inline-template>
    <div>
        <div class="panel panel-default">
            <div class="panel-heading">My Counter @{{ initialCounter }}</div>

编辑：我缩小了问题范围。如果我像这样传递一个变量，它就会起作用：

<update-partner :initial-counter="1" inline-template>

但是如果我传递一个对象，它就不起作用:

<update-partner :initial-counter="users" inline-template>

当我传递该对象时，initialCounter 在我的模板中有效，但 counter 无效。

当我传递一个整数时，两个变量都有效。

传递对象时我需要做哪些不同的事情？

Answer 1

所以当您在组件中执行以下操作时会出现问题：

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

您正在为 initialCounter 分配 counter 初始值，您稍后会在 mounted 块中更改该值。如果您需要更改值以在 counter 中设置，则必须在 initialCounter 上设置观察者，如下所示：

  watch:{
    initialCounter: function(newVal){
      this.counter = newVal;
    }
  }

您可以看到工作 fiddle。

如何在 Vue.js 中使用对象道具？

How can I use object props in Vue.js?

vue.js

vue-component