验证v-rating事件~点击

Question

我使用的是vuetifys的v-rating组件。我正在使用v-model显示当前的平均评分。当用户单击评分组件时，我想要更新当前评分。这很好用，问题是当当前评级等于用户想要给出的评级时，将不会发出任何事件。这遵循停靠，因为评级组件只有在输入更改时才会发出事件。当一颗星被点击时，无论它是否与当前的星相同，你有什么想法来发射一个事件吗？

<v-rating
            :readonly="isGuest"
            color="yellow accent-4"
            background-color="grey lighten-2"
            v-model="averageRating"
            hover
            size="20"
            dense
            @input="handleRating" 
          ></v-rating>

Answer 1

您可以使用item插槽来处理评级更改：

<v-rating v-model="rating">
   <template v-slot:item="props">
    <v-icon
      :color="props.isFilled ? 'blue' : 'grey lighten-1'"
      @click="handleRatingChange(props)"
    >mdi-star
    </v-icon>
  </template>
</v-rating>

data: () => ({
  rating: 3
}),
methods: {
  handleRatingChange(props) {
    console.log(props.index + 1)
    this.rating = props.index + 1
  }
}