Question

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

2016-12-30

1748

vue.js vue-component

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 }
}

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

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

您可以看到正在运行的 fiddle 。