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

我使用的是语义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>

我的问题截图

---

此问题现已解决。显然，我所做的是在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
              });
          })
      }
    },

  })

---

反应性与jQuery不兼容。您可以在Vue中编写此功能，也可以使用现成的解决方案，例如@Gander，当您说在Vue中编写此功能时，您在这里的确切意思是什么？@fear_矩阵呈现页面时，您的rating jQuery扩展接受数据评级的值，并使用此值创建星级。以后对该值发生的任何事情都将被rating jQuery扩展忽略。我建议您检查您的分级扩展是否支持刷新，并在您的物品分级发生变化时从vue触发刷新功能。如果您需要其他帮助，请告诉我们您使用的分级扩展。@Gander我正在使用semantic.min.js，此URL中提供了我如何使用semantic ui分级的更多详细信息。我只是在javascript中初始化.ui.rating，并通过UIStarRating调用它。“我没有做任何额外的事情。”恐惧矩阵，试着像马尔迪克斯写的那样，让Vue刷新星星。如果这不起作用，请尝试使用我之前提供链接的组件，或者编写自己的vue组件。jQuery的工作方式与Vue不同，无论它是函数还是特定的CSS类，在运行时都会覆盖Vue的效果。