如何在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 } 
} 

要分配的initialCountercounter初始值，您在mounted塊以後更改。如果您需要更改值counter設置，你必須設置一個觀察者對initialCounter，像以下：

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

你可以看到工作fiddle。