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

您正在指定counter初始值initialCounter，您稍后会在mounted块中进行更改。如果您需要更改要在counter中设置的值，则必须在initialCounter上设置观察者，如下所示：

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

您可以看到工作fiddle。

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

1 个答案: