代码有效，但在 Vue 中仍然收到警告答案

【问题标题】：Code works but still getting warning in Vue代码有效，但在 Vue 中仍然收到警告
【发布时间】：2021-01-02 05:22:40
【问题描述】：

我收到警告“避免直接改变道具”，我知道这可以通过Vue Official Documentation 中提到的数据属性或计算使用来解决。但我不知道如何将我的代码更改为任何这些方法。请帮助我使用正确的代码来消除此警告。

我的代码如下所示：

<template>
  <div class="track-rating">
    <span :key="note" v-for="note in maxNotes" :class="{ 'active': note <= rating || note <= hoveredNote }" @mouseover="hoveredNote = note" @mouseleave="hoveredNote = false" @click="rate(note)" class="material-icons mr-1">
    audiotrack
   </span>
 </div>
</template>
<script>
   export default {
     name: "Rating",
     props: {
         rating: {
            type: Number,
            required: true
        },
        maxNotes: {
            type: Number,
            default: 3
        },
        hasCounter: {
            type: Boolean,
            default: true
        },
        itemId: {
            type: String
        }
    },
    data() {
        return {
            hoveredNote: false
        };
    },
    methods: {
        rate(note) {
            if (typeof note === 'number' && note <= this.maxNotes && note >= 0)
                this.rating = this.rating === note ? note - 1 : note
            this.$emit('onRate', this.itemId, this.rating);
        }
    }
};

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您正在修改 rate 方法上的 rating 属性，因此为了避免警告，您应该避免修改此属性，一个简单的解决方案虽然不是很优雅，但是制作您的属性的本地副本：

<template>
  <div class="track-rating">
    <span :key="note" v-for="note in maxNotes" :class="{ 'active': note <= copiedrating || note <= hoveredNote }" @mouseover="hoveredNote = note" @mouseleave="hoveredNote = false" @click="rate(note)" class="material-icons mr-1">
    audiotrack
   </span>
 </div>
</template>
<script>
   export default {
     name: "Rating",
     props: {
         rating: {
            type: Number,
            required: true
        },
        maxNotes: {
            type: Number,
            default: 3
        },
        hasCounter: {
            type: Boolean,
            default: true
        },
        itemId: {
            type: String
        }
    },
    mounted () {
      this.copiedrating = this.rating;
    },
    data() {
        return {
            hoveredNote: false,
            copiedrating: null,
        };
    },
    methods: {
        rate(note) {
            if (typeof note === 'number' && note <= this.maxNotes && note >= 0)
                this.copiedrating = this.copiedrating === note ? note - 1 : note
            this.$emit('onRate', this.itemId, this.copiedrating);
        }
    }

【讨论】：

【解决方案2】：

不要直接修改this.rating，只需发送事件并在父组件中进行更改....

 methods: {
        rate(note) {
            if (typeof note === 'number' && note <= this.maxNotes && note >= 0) {
                const newRating = this.rating === note ? note - 1 : note
                this.$emit('onRate', this.itemId, newRating);
            }
        }
    }

...然后在父处理事件（我不知道父组件或数据看起来如何，所以这更像是伪代码...）

<Rating :itemId="track.itemId" :rating="track.rating" @onRate="changeRating" />

methods: 
  changeRating: function(id, rating) {
    let trackIndex = this.tracks.indexOf(track => track.itemId === id)
    this.tracks[trackIndex].rating = rating
  }

【讨论】：