Vue props update - You may have an infinite update loop in a component render function

Question

Vue.component("step", {
        props: ["Model", "step"],
        data: function () {
            return {
                
            };
        },
        methods: {
            activateStep: function (step) {
                var vm = this;

                Vue.set(vm.Model, "ActiveStep", step);
            }
        }
});

<step inline-template :model="Model" step=SomeStepNumber>

</step>

When I am trying to update vm.Model.ActiveStep it gives error saying - "You may have an infinite update loop in a component render function"

Answer 1

You shouldn't set the value(s) of properties within a component. Properties are set by the parent and passed into the component. The error is

Vue.set(vm.Model, "ActiveStep", step);

If the component needs to update its parent, the idiomatic approach is to emit an event to the parent

this.$emit("step", step)

and have that parent component update the property as appropriate.

If you need two-way binding, you can either use v-model or the .sync modifier