Vue.js星级评分组件重置问题：无需刷新恢复数据库值

The issue here is that when an unauthenticated user selects a rating, the v-model updates your local rating variable—but since you don't want to save that change, you need a way to revert it back to the original database value without reloading the page. Here's a clean, Vue-native approach to fix this:

Step 1: Track the Original Database Rating #

First, store the initial rating from your database in a separate reactive property. This gives you a "source of truth" to revert to when needed.

<script>
export default {
  data() {
    return {
      rating: 0, // Bound to the star-rating component via v-model
      originalDbRating: 0, // Holds the initial value from your database
      isLoggedIn: false, // Replace with your actual auth check logic
      errorMessage: ''
    };
  },
  async mounted() {
    // Fetch the initial rating from your database
    const fetchedRating = await this.fetchRatingFromDatabase();
    this.rating = fetchedRating;
    this.originalDbRating = fetchedRating;
  },
  methods: {
    async fetchRatingFromDatabase() {
      // Replace with your actual API call to get the rating
      const response = await fetch('/api/get-rating');
      return response.json();
    },
    setRating(newRating) {
      if (!this.isLoggedIn) {
        // Show error message
        this.errorMessage = 'login to rate';
        
        // Reset rating back to the original database value
        this.rating = this.originalDbRating;
        
        // Optional: Clear error after a few seconds for better UX
        setTimeout(() => {
          this.errorMessage = '';
        }, 3000);
        
        return;
      }

      // If user is logged in, proceed to save the new rating
      try {
        await this.saveRatingToDatabase(newRating);
        // Update the original rating if save is successful
        this.originalDbRating = newRating;
      } catch (error) {
        this.errorMessage = 'Failed to save rating';
        // Revert to original if save fails
        this.rating = this.originalDbRating;
      }
    },
    async saveRatingToDatabase(newRating) {
      // Replace with your actual API call to save the rating
      await fetch('/api/save-rating', {
        method: 'POST',
        body: JSON.stringify({ rating: newRating })
      });
    }
  }
};
</script>

<template>
  <div>
    <star-rating 
      :show-rating="false" 
      @rating-selected="setRating" 
      v-model="rating"
    />
    <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
  </div>
</template>

How This Works #

• Original Rating Storage: By keeping originalDbRating as a separate property, you always have the initial database value to fall back on.
• Reactive Reset: When you set this.rating = this.originalDbRating, Vue's reactivity system automatically updates the star-rating component to match the original value—no page refresh needed.
• Error Handling: The error message is shown temporarily and cleared after 3 seconds for a better user experience.

This approach is lightweight, leverages Vue's core reactivity features, and avoids the need for full page reloads.

内容的提问来源于stack exchange，提问作者Hashaam Ahmed