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

을 당신은 나중에 mounted 블록의 변경 initialCounter의 counter 초기 값을 할당한다. 당신이 counter에서 설정 값을 변경해야하는 경우에는 다음과 같이, initialCounter에 감시자를 설정해야합니다 :

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

당신은 fiddle 작업 볼 수 있습니다.