如何在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没有。

当我传递一个整数时，两个变量都起作用。

当我传递一个对象时，我需要做什么改变？

你可以放更多的代码来说清楚，initialCounter是在父组件中异步填充的吗？ – Saurabh

@saurabh谢谢我添加了更多信息。 – Citizen

你的用户在哪里定义，它们是怎样的？ – Saurabh

答

所以，问题发生时，你正在做以下的成分为：

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

要分配的initialCountercounter初始值，您在mounted块以后更改。如果您需要更改值counter设置，你必须设置一个观察者对initialCounter，像以下：

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

你可以看到工作fiddle。

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

相关推荐