Vue props update - в компонентной функции рендеринга может быть бесконечный цикл обновления

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>

Когда я пытаюсь обновить vm.Model.ActiveStep, выдается сообщение об ошибке: « У вас может быть бесконечный цикл обновления в функции рендеринга компонента "

Answer 1

Вы не должны устанавливать значение (я) свойств в компоненте. Свойства устанавливаются родителем и передаются в компонент. Ошибка

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

Если компонент должен обновить своего родителя, идиоматический подход заключается в отправке события родителю

this.$emit("step", step)

и этот родительский компонент обновляет свойство соответствующим образом.

Если вам нужно двустороннее связывание, вы можете использовать v-model или .sync модификатор