Vue.js의 함수 콜백에 제대로 표시되지 않는 내용

Question

여기에 두 가지 문제가 있습니다. 첫 번째는 내가 별을 올바르게 렌더링 할 수 없다는 것입니다. data() 함수의 값을 변경하면 할 수 있지만 함수 콜백 방식으로 수행하려면 작동하지 않습니다 (아래 주석 참조). 여기서 뭐가 잘못 됐어? Vue의 수명주기와 관련이 있습니까?

둘째는 텍스트 비율을 제출하고 텍스트 영역의 콘텐츠를 제출하고 페이지를 새로 고침 할 때 콘텐츠를 페이지에 렌더링하고 <textarea></textarea>을 대체해야합니다.

여기 JSFiddle을 만들고 싶지만 Vue의 단일 파일 구성 요소를 만드는 방법을 모르겠다. 정말 도움이된다. 보인다 무엇

<div class="order-comment"> 
    <ul class="list-wrap"> 
    <li> 
     <span class="comment-label">rateA</span> 
     <star-rating :data="dimensionA"></star-rating> 
    </li> 
    </ul> 
    <div> 
    <h4 class="title">comment</h4> 
    <textarea class="content" v-model="content">  
    </textarea> 
    </div> 
    <mt-button type="primary" class="mt-button">submit</mt-button> 
</div> 
</template> 

<script> 
import starRating from 'components/starRating' 
import dataService from 'services/dataService' 
export default { 
    data() { 
    return { 
     dimensionA: '' //if I changed the value here the star rendered just fine. 
    } 
    }, 
    components: { 
    starRating 
    }, 
    methods: { 
    getComment (id) { 
     return dataService.getOrderCommentList(id).then(data => { 
     this.dimensionA = 1 
     }) 
    } 
    }, 
    created() { 
    this.getComment(1) // not working 
    } 
} 
</script> 

Answer 1

이 this의 범위가 getComment 방법 정확하지 않습니다, 당신은 다음과 같이 변경해야합니다

methods: { 
    getComment (id) { 
    var self = this; 
    dataService.getOrderCommentList(id).then(data => { 
    self.dimensionA = 1 
    }) 
    } 
}, 

---

당신이 <textarea>를 교체하고 컨텐츠의 경우 렌더링 원하는대로 현재 콘텐츠가있는 경우 v-if을 사용할 수 있습니다 (가능한 경우 콘텐츠 표시). <textarea>

<div> 
    <h4 class="title">comment</h4> 
    <span v-if="content> {{content}} </span> 
    <textarea v-else class="content" v-model="content">  
    </textarea> 
    </div> 

작동하는 바이올렛 here을 참조하십시오. 난 당신의 코드에서 관찰

---

또 하나의 문제는 동적 소품을 사용하는,하지만 당신은 star-rating 구성 요소의 데이터 변수 value에 처음 소품을 할당,하지만 당신은 소품에서 미래의 변화를 확인하지 않습니다. 한 가지 방법은 value 변수의 다른 사용이 watch 다음 가하고있는 가정이 문제를 해결하려면 다음

watch:{ 
    data: function(newVal){ 
     this.value = newVal 
    } 
} 

는 fiddle 업데이트를 참조하십시오.