使用v-bind通过vue.js渲染在语义ui中更新星值时的问题

Question

我正在使用语义UI和vue.js，下面是一个简单的代码，其中我正在运行vue.js for循环，该循环用于获取商家，点击次数和评分值。除{{item.rating}}以外，该代码均正常运行。问题是，虽然我得到的是我的评分的数值，但不知何故它没有更新我的“ ui星级”（请看截图。它看起来好像没有更新“ initialRating”的默认值3，即我要推送的值。不确定如何解决。

<div id="vue-app" class="ui four doubling cards">
    <div id="myList" class="ui small card" v-for="(item, index) in infox" v-show="item.Title">
    <p class="small meta">{{ item.Merchant }}</p>
        <p class="meta"><i class="mouse pointer icon"></i>{{item.Clicked}} clicked today</p>
        <div class="ui star rating" v-bind:data-rating="{{item.Rating}}"></div>
</div>
<script>
    $('.ui.rating')
    .rating({
    initialRating: 3,
    maxRating: 5});
</script>

我的问题的截图

Answer 1

此问题现已解决。显然，我所做的是在axios api调用之后，在我的vue方法中插入了语义ui的“ .ui.rating”函数。因此，这意味着执行axios.get之后，每次调用loadmore时，都会初始化我的“ .ui.rating”调用。

new Vue({
    el: '#vue-app',
    delimiters: ['[[', ']]'],
    data: {
      dino: d_var,
      infox: [],
      isHidden: false
    },
    methods: {
      loadmore: function () {
        axios.get(this.dino)
          .then(response => {
            this.infox.push(...response.data);
            this.dino = "/api/search/" + this.infox[this.infox.length - 1].lid;
            kk = this.infox[this.infox.length - 1].gr;
            jj = ("true" == kk);
            this.isHidden = jj;
          })
          .then(function () {
            $('.ui.rating')
              .rating({
                initialRating: 3,
                maxRating: 5
              });
          })
      }
    },

  })