v-runtime-template 和 vuex 导致无限更新循环 [英] v-runtime-template and vuex cause infinite update loop

问题描述

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

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.

我用CodeSandbox写了两个例子，但是注意点击Demo2可能会导致浏览器死.

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

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

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

推荐答案

我已经解决了这个问题.定义一个子组件来加载 v-runtime-template，在父组件中获取数据并通过 props 将其传递给子组件.代码是这样的:

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>

这篇关于v-runtime-template 和 vuex 导致无限更新循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！