vuetify数据表中的内联滑块？

Question

我正在制作一个数据表，但出现问题，我希望在表中放置一个滑块，如下所示

是否可以调整此内联？因为此刻我陷入无限循环。我已经尝试了一切，但是我不想为此使用编辑对话框

<template slot="items" slot-scope="props">
      <td class="text-md-left">
        <v-beer-image custom-class="review-image" 
:name="props.item.name"></v-beer-image>
      </td>
      <td class="text-md-left">{{ props.item.name }}</td>
      <td class="text-md-left">{{ props.item.brewery }}</td>
      <td class="text-lg-center-left">
        <v-slider class="custom-slider"
                  step="1"
                  tick-size="3"
                  min="1"
                  max="5"

                  v-model="props.item.score"
                  inverse-label
                  :label="ticksLabels[props.score - 1]"
        ></v-slider>
      </td>
</template>

和此方法：

methods: {
      updateReview(score, id) {
        console.log(score, id);
        this.updateReview({
          userId: this.account._id,
          beerId: id,
          overall: score,
        });
      },

使用这段代码，我正在无限循环，有人建议

the result that I wish