Question

我遇到了一个让我感到困惑的无限循环。我使用v-runtime-template来加载动态表单，当我使用静态数据时一切正常，但是从vuex获取数据后切换到无限循环。

我用CodeSandbox编写了两个示例，但是请注意，单击Demo2可能会导致浏览器死亡。

数据加载需要通过vuex完成。如何解决无限循环问题，期待您的帮助。

Answer 1

我已经解决了这个问题。定义一个子组件以加载v-runtime-template，获取父组件中的数据，然后通过prop将其传递给子组件。代码是这样的：

<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>

v-runtime-template和vuex导致无限更新循环

1 个答案: