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>

请参阅工作小提琴here。

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

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

请参阅更新的fiddle。

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

1 个答案: