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

Question

我这里有两个问题。首先是我无法正确渲染星星。如果我更改 data() 函数中的值，我可以做到这一点，但如果我想以函数回调的方式进行，它就不起作用（见下面的评论）。这里出了什么问题？跟Vue的生命周期有关系吗？

第二个是我想提交星级和textarea的内容，当我刷新页面时，内容应该呈现在页面上并替换<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>

查看工作 fiddle here。

我在您的代码中观察到的另一个问题是您使用的是动态道具，但您已将道具最初分配给 star-rating 组件中的数据变量 value，但您没有检查道具的未来变化。解决此问题的一种方法，假设您对 value 变量有一些其他用法，请使用以下 watch:

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

查看更新 fiddle。

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

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

javascript

vue.js

vue-resource

vue-component

vuejs2