Console error crashes: [Vue warn]: Avoid the re-renders. Instead, use a property based on the prop's value. Prop being mutated: "hover" I can't fix it.

HTML

<div id="body"> <div class="gallery"> <div is="item" v-for="(item, index) in items" v-bind="item"> </div> </div> </div> <script src="https://unpkg.com/vue"></script>

Js

 ;(function(){ 'use strict'; Vue.component('item', { template: ` <div id="item" v-on:mouseenter="show" v-on:mouseleave="hide" class="item a"> <div class="hover-strip" v-bind:class="{ visible: hover }"></div> </div> `, props: ['hover'], data () { return { } }, methods: { show: function (event) { this.hover = true; }, hide: function (event) { this.hover = false; } } }) new Vue({ el: '#body', data: function () { return { items: [ { hover: false }, { hover: false } ] } } }); }());

The code on jsfiddle.net https://jsfiddle.net/ngk675qh/

    1 answer 1

    Add a local state for the hover property in data

     data () { return { hoverLocal: this.hover } },

    And in your component, refer to it, not to hover .

    The fact is that Vue.js practices the one way data flow approach. I mean, changing the properties of the parents by the child components is directly prohibited. About this Vue in this case, and reports that you have a hover property, but it cannot change it from the child component.

    If you still need to change the properties of the parent from the child: read about Sync , Data Bus or vuex

    • Vue.component('item', { template: <div id="item" v-on:mouseenter="show" v-on:mouseleave="hide" class="item a"> <div class="hover-strip" v-bind:class="{ visible: hoverLocal }"></div> </div> , props: ['hoverLocal'], data () { return { hoverLocal: this.hover } }, methods: { show: function (event) { this.hoverLocal = true; }, hide: function (event) { this.hoverLocal = false; } } }) corrected, but the error is the same, plus "The data property" hoverLocal "is already declared as a prop. Use prop default value instead. " - Volodymyr Schwab
    • Do not declare hoverLocal as prop . Leave there hover - GONG