Vue.jsの関数コールバックに正しく表示されないコンテンツ

Question

ここでは2つの問題があります。最初は、私が星を適切にレンダリングすることができないということです。 data()関数の値を変更するとできますが、関数コールバックの方法でそれをやりたいのであれば、機能しません（下記のコメントを参照）。ここで何がうまくいかないの？ Vueのライフサイクルと関係がありますか？

2番目は、テキストレートのスターレートとコンテンツを送信したいのですが、ページを更新するときにコンテンツをページに表示し、<textarea></textarea>の代わりに何をすればいいですか？

私はここでJSFiddleを作りたいと思いますが、私はVueの単一ファイルコンポーネントでそれを作る方法を知らないので、あなたの助けに本当に感謝します。あなたがあれば<textarea>を交換し、コンテンツをレンダリングしたいと

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

---

を：

<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方法では正しくありません存在する場合は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最初に小道具を割り当てられているが、あなたが小道具で、将来の変化をチェックしていません。これを解決する1つの方法、あなたはvalue変数のいくつかの他の使用は、watch以下入れて持っていると仮定すると：

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

はfiddleを更新参照してください。