这个需求确实很奇葩,但是又必须要用。
因为我使用的el-input 所以不能像 textarea那样把业务逻辑写在textarea里。我只能想办法在 v-model 里操作。
但是v-model只能接受一个字符串。所以只能先渲染逻辑代码最后生成字符串 再赋值给 formData.txtRequest
<el-form-item label="SQL:" prop="txt_sql"> <el-input v-model="formData.txt_sql" type="textarea" placeholder="请输入SQL" :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input> </el-form-item> <template v-if="result_success"> <el-form-item label="request:" prop="txt_request"> <el-input v-model="formData.txt_request" type="textarea" :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input> </el-form-item>
vue的 data里是这样的:
export default { name: 'Convert4gb', components: {}, props: [], data() { return { result_success:true, formData: { txt_sql:"", txt_request: "" } } } }
最后找到的解决方案是 使用 : vue-template-render
安装方法:
npm install vue-template-render
使用方法:
/# es6导入 // import TemplateRender from 'vue-template-render' //# cmd导入 const TemplateRender = require('vue-template-render') //no options const vueTemplate1 = ` <div><span v-for="i in 10">{{ i }}</span></div> ` //# 输出 dom console.log(TemplateRender.render(vueTemplate1)) //# 输出 html console.log(TemplateRender.render(vueTemplate1).outerHTML) //options const vueTemplate2 = ` <div><span v-for="i in 10">{{msg}} --- {{ i }}</span></div> ` //# 输出 dom console.log(TemplateRender.render(vueTemplate2, {data: {msg: 'hello'}})) //# 输出 html console.log(TemplateRender.render(vueTemplate2, {data: {msg: 'hello'}}).outerHTML)
注意点:
模板必须有个根目录 比如 <div></div>
数据必须包含在 data里
所以我改了代码:
const requestTemp = TemplateRender.render(`<div>{{txt_sql}}</div>`,{data:{txt_sql:this.formData.txt_sql}}).outerHTML; this.formData.txt_request = requestTemp;
最终效果:
原创申明:本文章为三叔原创。