Javascript Vue.js中的函数回调中未正确显示内容

我这里有两个问题。首先，我不能正确地渲染星星。如果我更改

data（）

函数中的值，我可以这样做，但如果我想以函数回调的方式这样做，它就不起作用（请参见下面的注释）。这里怎么了？它是否与Vue的生命周期有关

第二个问题是，我想提交星级和textarea的内容，当我刷新页面时，内容应该呈现在页面上，并替换

我能做什么

我想在这里制作一个JSFIDLE，但我不知道如何在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>

拉塔


评论
提交
从“组件/星号”导入星号
从“服务/数据服务”导入数据服务
导出默认值{
数据（）{
返回{
dimensionA:''//如果我在这里更改了值，则星形渲染得很好。
}
},
组成部分：{
主演
},
方法：{
getComment（id）{
返回dataService.getOrderCommentList（id）。然后（数据=>{
此参数a=1
})
}
},
创建（）{
this.getComment（1）//不工作
}
}

似乎是

的范围这在您的
getComment
方法中是不正确的，您需要进行如下更改：

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


如果要替换
并呈现内容（如果有），可以使用-show content else show

请参阅更新。
数据应该是
get
方法吗？这里有一个使用非单文件组件的基本方法，它可能会帮助您重建您的问题：@whatAboutJohn
data（）
应该是组件中的一个函数，这就是您的意思吗？因为您正在执行
this.dimensionA
，我认为访问它的方法是
get data（）{…}
然后
this.data.dimensionA
关于您了解SFC，但不知道如何不使用SFC的事实，我假设您使用的是vue cli，但缺乏vue的基础知识。我建议您在继续之前阅读官方文件和示例。老实说，vue cli可能不是入门级vue开发人员的好选择（无意冒犯）。如果您想根据自己的项目需要自定义cli配置，您可能会遇到困难。非常感谢。我已经在代码中存储了这个值，但它不起作用。感谢@craig_h，我试图创建一个JSFIDLE来让事情变得更清楚，但我无法让它工作，因为它导入了dataService来发布一个未定义的请求。我可以在这里模拟像dataService这样的东西吗？它向我返回一个成功的响应以获得结果，然后JSFIDLE就可以工作了？@JonX See更新了更改，也更新了答案。thanks@saurabh. 问题仍然存在，原因是
data（）
函数中返回的数据没有更改，但在以小胡子方式打印时效果良好。请看这里更新的小提琴，
  <div>
    <h4 class="title">comment</h4>
    <span v-if="content> {{content}} </span>
    <textarea v-else class="content" v-model="content">      
    </textarea>
  </div>

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