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

dewei
  • 129

如题,大家好,我存入数据库一些数据,格式如下:
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)谢谢,

回复
阅读 4.6k
4 个回答
✓ 已被采纳

不建议服务端直接保存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>

你都拼接字符串了何必用v-model 直接this.test1 去拼接就好了

Vue.compile可以

注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。
链接描述

可以用render函数替代

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏