Vue 2 避免直接改变道具，因为该值将被覆盖答案

【问题标题】：Vue 2 Avoid mutating a prop directly since the value will be overwrittenVue 2 避免直接改变道具，因为该值将被覆盖
【发布时间】：2021-03-02 20:07:29
【问题描述】：

我阅读了文档，也阅读了类似的帖子，但仍然不明白

这是我收到的警告

避免直接修改 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。

子组件：

    <div>
        <v-container class="ma-0 pa-0">
            <v-col class="pa-0" cols="8">
                <v-text-field
                    class="search-field ma-0"
                    flat
                    color="black"
                    :label="$t('keyWord')"
                    v-model="searchKeyWord"
                    @click:clear="clearFilterByKeyWord"
                    clearable
                ></v-text-field>
            </v-col>
            </v-row>
            <v-btn
                depressed
                class="black--text my-10 rounded-0"
                color="primary"
                @click="globalFilter"
                >{{ $t('search_subsidiary') }}</v-btn
            >
        </v-container>
    </div>
</template>

<script>
export default {
    props: {
        dataValue: {
            require: true
        },
        dataValueOriginalCount: {
            require: true
        }
    },
    data() {
        return {
            searchKeyWord: '',
        };
    },
    methods: {
         clearFilterByKeyWord() {
            this.searchKeyWord = '';
            this.unfilterStoComponents();
        },
        globalFilter() {
            //global function which invoke all on click Search button
            if (this.searchKeyWord && this.searchKeyWord !== '') {
                this.filterByKeyWord();
            }

            this.$emit('changeData', this.dataValue);
            this.$emit('changeDataOriginal', this.dataValueOriginalCount);
        },
     
    }
};

</script>

父组件：

<v-data-table
            :headers="headers"
            :items="stoSystems"
            v-show="isLoading"
            v-if="areResultsVisible"
            @dataValue="stoSystems = event"
            @dataValueOriginalCount="originalstoSystemsCount = event"
        >
            <template v-slot:item.name="{ item }">
                <td >
                    {{ item.name }}
                </td>
            </template>
        </v-data-table>
        <script>
export default {
    data() {
        return {

            headers: [
                {
                    text: this.$t('id'),
                    value: 'id'
                },
                {
                    text: this.$t('nav_item_systems'),
                    value: 'name',
                    sortable: false
                },
           
            ],
           Systems: [],
            originalstoSystemsCount: [],
           
        };
    },
    async mounted() {
        try {
            let res = await axios.get('blbalbla/systems');
            this.Systems = res.data;
            this.originalstoSystemsCount = res.data;
        } catch (error) {
            console.error(error);
        }
    }
};
</script>```

【问题讨论】：

标签： vue.js axios

【解决方案1】：

这就是说，在您的 子组件中，您不应该直接改变 dataValue 或 dataValueOriginalCount，而是将 data 属性设置为这些值并改变您的数据属性像这样的子组件：

data() {
    return {
        originalCount: this.dataValueOriginalCount,
    };
}

现在在您的子组件中，您可以使用originalCount，它将具有dataValueOriginalCount 的任何值。

您可以根据需要在父组件中更改 dataValueOriginalCount，因为此时它们不是道具。

【讨论】：