The content not shown properly in function callback in Vue.js

Question

I've got two problems here. The first is that I can't get the star rendered properly. I can do it if I change the value in the data() function but if I want to do it in a function callback way, it doesn't work (see comments below). What's going wrong here? Does it have something to do with Vue's lifecycle?

The second one is that I want to submit the star-rate and the content of the textarea and when I refresh the page, the content should be rendered on the page and replace the <textarea></textarea> what can I do?

I want to make a JSFiddle here but I don't know how to make it in Vue's single-file component, really appreciate your help.

<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

What it seems is scope of this is not correct in your getComment method, you need changes like following:

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

---

As you want to replace the <textarea> and render the content if present, you can use v-if for this, if content if available- show content else show <textarea>

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

See working fiddle here.

---

one more problem I have observed in your code is you are using dynamic props, but you have assigned the prop initially to the data variable value in star-rating component, but you are not checking future changes in the prop. One way to solve this, assuming you have some other usage of value variable is putting following watch:

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

see updated fiddle.