vue如何解析字符串中的v-model

如题，大家好，我存入数据库一些数据，格式如下：
this.str = '<label v-model="test1">test</label><input type="text" name="test" v-model="test2" />'

然后在template 用 v-html渲染，但发现v-model没有成功被解析，代码如下：
<template>
<div id="parent" v-html="str">

</div>
</template>

因为我要动态生成表单并存储，在客户端展示使用，所以需要做这些操作。求助如何才能让vue解析来自接口中的html（含v-model）谢谢，

阅读 7.4k

不建议服务端直接保存vue模块，你的需求可以想想其他的解决方式，例如服务端存储用来生成表单的数据，前端利用这个数据来渲染表单。
一定要这样用也不是没有办法，可以借助 Vue.compile 先把字符串解析成render，再在本地组件render相应位置插入进行组合，但这要求你本地组件是用 render 而不是字符串模板，比较考验你的代码功力，维护起来也比较麻烦

很久没有直接在页面写vue了，刚才为确认你的疑问写了个demo测试了一下是可行的，但要注意的是你的模块不能直接解析，报错也是因为这个原因，Vue.compile也依据vue规范最外层必须有一个有效标签包裹

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>测试</title>
  <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <test></test>
</div>
<script>
  Vue.component('test', {
    data() {
      return {
        test2: '123',
        str: '<div><label>test</label><input type="text" name="test" v-model="test2" /></div>',
      };
    },
    render(h) {
      const res = Vue.compile(this.str);
      return h(
        'div',
        [res.render.call(this, h)],
      );
    },
  });
   new Vue({
    el: '#app',
  });
</script>
</body>
</html>

vue如何解析字符串中的v-model

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？