Forms 如何将Vuetify表单从数据库注入模板？

抱歉，如果这已经在别处得到了答复，我已经搜索过了，但还没有找到任何东西

我有一个存储在数据库中的v形表单，我希望将其拉回并显示在页面上。但是，当我这样做时，表单没有正确呈现。它保留为Vuetify模板代码，不会转换为HTML

表单如下所示：

<v-form>
  <v-container>
    <v-row>
      <v-col>
        <div class="text-h4">Form 1</div>
      </v-col>
    </v-row>
    <v-row>
      
      <v-col
        cols="12"
        md="6"
      >
        <v-text-field
          :counter="255"
          label="Customer ID"
          required
        ></v-text-field>
      </v-col>

      <v-col
        cols="12"
        md="6"
      >
        <v-text-field
          label="Amount"
        ></v-text-field>
      </v-col>
      <v-col class="text-right">
        <v-btn
          @click="submitForm"
        >
          Submit
        </v-btn>
      </v-col>

    </v-row>
  </v-container>
</v-form>

表格一
提交

我确实遇到了一个渲染函数，但我要么没有正确使用它，要么它没有达到预期的效果-我是一个新手，所以它可能很简单

上面的表单是使用axios从数据库中提取出来的，请求发生在我希望显示它的页面上的created（）函数中，使用mapGetters（）从存储中获取它，并使用v-card中的v-html显示它

在此方面的任何帮助都将不胜感激

谢谢大家抽出时间

如何将Vuetify表单从数据库注入模板

你不能

v-html

更新元素的

innerHTML

。请注意，内容是以纯HTML形式插入的-它们不会编译为Vue模板。如果您发现自己试图使用

v-html

编写模板，请尝试使用组件来重新考虑解决方案

另一个

请注意，您不能使用

v-html

来编写模板部分，因为Vue不是基于字符串的模板引擎。相反，组件是首选的UI重用和组合的基本单元

因此，简而言之，不能在运行时将任何部分模板插入组件的模板中

但您可以在运行时创建组件并将其用作

const vm=new Vue({
el:“#应用程序”，
数据（）{
返回{
downloadedTemplate:'你好'，//假装这是从服务器下载的
}
},
计算：{
myDynamicComponent（）{
返回Vue.component（'myDynamicComponent'{
模板：this.downloadeTemplate
})
}
}
})

你好，迈克尔，谢谢你的帮助。我有一种不愉快的感觉，可能就是这样。我只是运行了一个测试，复制生成的表单HTML并将其放入数据库中。这部分起作用，但在页面刷新时，表单字段混乱且重叠。是的，我要处理很多用户创建的表单，所以需要存储它们。看起来我需要从一开始就用HTML构建表单。也许如果您更深入地描述您的特定用例，我们可以找到更好的解决方案。下面是一个场景：我有很多用户可以通过拖放界面创建HTML表单。然后将这些表单以及一些自定义属性保存到数据库中。表单按用户选择的顺序向后拉并填写。想象一下汽车保险市场的比较，你就会明白，只有用户创建的自定义表单，而不是已知数量的表单。好的，我会研究一种叫做“基于模式的表单”库的东西。您不需要将模板本身保存到数据库中，而是保存一个名为schema的东西，它是表单的“定义”（字段、数据类型、验证等）。然后，库可以使用该模式为您创建（并显示）表单。模式抓住了本质——从数据的角度看什么是重要的。但您仍然能够控制输入，并随着时间的推移进行更改，每个输入如何工作，以及如何呈现给用户。例如：我昨天在研究过程中遇到了基于模式的表单，但我拒绝了它们，因为我认为它们不适合我对拖放表单创建者的需求……但是想想看，如果拖放界面要在后台创建模式，然后将其存储在数据库中，我可以将其与数据一起拉回来。谢谢你的帮助，迈克，非常感谢！