v-runtime-template and vuex cause infinite update loop

问题

I came across an infinite loop that really confused me. I used v-runtime-template to load dynamic forms, everything works fine when I use static data, but switches to an infinite loop after getting data from vuex.

I have written two examples with CodeSandbox, but note that clicking on Demo2 may cause the browser to die.

The loading of data needs to be done through vuex. How to solve the problem of infinite loop, I look forward to your help.

回答1:

I have solved this problem. defining a sub-component to load v-runtime-template, get data in the parent component and passing it to sub-components via props. Code is like this:

<template>
  <form data-vv-scope="custom-form" v-if="html">
    <form-content :html="html" :data="data" :permission="permission" />
  </form>
</template>

<script>
import FormContent from "@/components/FormContent.vue";
import { mapState } from "vuex";

export default {
  name: "demo2",
  computed: mapState({
    html: state => state.html,
    data: state => state.data,
    permission: state => state.permission
  }),
  components: {
    FormContent
  },
  created() {
    this.$store.dispatch("loadForm");
  }
};
</script>

来源：https://stackoverflow.com/questions/55158447/v-runtime-template-and-vuex-cause-infinite-update-loop