Блог

Я прочитал документы, также прочитал похожий пост, но все равно не понял

Это предупреждение, которое я получаю

Избегайте прямого изменения реквизита, поскольку значение будет перезаписываться всякий раз, когда родительский компонент повторно отображает. Вместо этого используйте data или вычисляемое свойство на основе значения 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 amp;amp; 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>```
  

Все это говорит о том, что в вашем дочернем компоненте вы не должны изменять dataValue или dataValueOriginalCount напрямую, вместо этого установите data свойство для этих значений и измените свое свойство данных в своем дочернем компоненте следующим образом:

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

Теперь в вашем дочернем компоненте вы можете использовать originalCount , и он будет иметь любое значение dataValueOriginalCount .

Вы можете изменять dataValueOriginalCount родительский компонент, как хотите, поскольку на данный момент они не являются реквизитом.