在 Vue.js 中添加动态数据绑定文本 [英] Add dynamically data-bound text in Vue.js
问题描述
我的案子一定很奇怪,但我很擅长.这是我的情况:
我有一个基于 json 呈现表单的 Vue 应用程序.例如,JSON:
<代码>{字段":[{"name": "firstName","title": "姓名"}, {"name": "lastName","title": "姓氏"}, {"title": "你好{{ firstName }}!"}]}
根据该 json,最终渲染必须是:
<input type="text" name="lastName" v-model="lastName"/><p>你好 {{ firstName }}</p>
我能够渲染所有这些,除了 渲染为原始
{{ firstName }}
而不是数据绑定/反应性.
我的问题是:如何将动态模板(可以来自 Rest API)插入到组件中,并让它们拥有 mustache 表达式的全部功能.
该组件将具有类似
{...firstName 字段...}<动态模板会在此处添加并在 firstName 更改时更新>
如果我对这个问题不太清楚,请告诉我谢谢!!!
这是您想要做的事情吗?我创建了一个动态组件,其模板是从可编辑的 JSON 字符串生成的.
new Vue({el: '#app',数据: {组件数据:{名字:'杰森',lastName: '伯恩',},jsonString:`{字段":[{"name": "firstName","title": "姓名"}, {"name": "lastName","title": "姓氏"}, {"title": "你好{{ firstName }}!"}]}`},计算:{模板() {const json = JSON.parse(this.jsonString);返回 json.fields.map((s) => {if ('name' in s) {return `<input type="text" name="${s.name}" v-model="${s.name}">`;}返回 s.title;}).join('\n');},组件规格(){返回 {模板:`<div>${this.template}</div>`,数据:() =>this.componentData};}}});
<script src="https://unpkg.com/vue@latest/dist/vue.js"></脚本><div id="应用程序"><textarea rows="16" cols="40" v-model.lazy="jsonString"></textarea><component :is="componentSpec"></component>
My case must be weird, but I have a good for it. Here's my situation:
I have a Vue app that renders a form based on a json. For example, the JSON:
{
"fields": [{
"name": "firstName",
"title": "Name"
}, {
"name": "lastName",
"title": "Last Name"
}, {
"title": "Hello {{ firstName }}!"
}]
}
From that json, the final render has to be:
<input type="text" name="firstName" v-model="firstName" />
<input type="text" name="lastName" v-model="lastName" />
<p>Hello {{ firstName }}</p>
I'm able to render all of that, except for the <p>
which is rendered as raw {{ firstName }}
and not data-bound/reactive.
My question is: How do I insert dynamic templates (can come from a Rest API) into the component, and make them have the full power of the mustache expressions.
The component will have something like
{...firstName field...}
<dynamic template will be added here and update whenever firstName changes>
Please let me know if I'm not too clear on this issue Thank you!!!
Is this the sort of thing you're trying to do? I've created a dynamic component whose template is generated from a JSON string which is editable.
new Vue({
el: '#app',
data: {
componentData: {
firstName: 'Jason',
lastName: 'Bourne',
},
jsonString: `
{
"fields": [{
"name": "firstName",
"title": "Name"
}, {
"name": "lastName",
"title": "Last Name"
}, {
"title": "Hello {{ firstName }}!"
}]
}`
},
computed: {
template() {
const json = JSON.parse(this.jsonString);
return json.fields.map((s) => {
if ('name' in s) {
return `<input type="text" name="${s.name}" v-model="${s.name}">`;
}
return s.title;
}).join('\n');
},
componentSpec() {
return {
template: `<div>${this.template}</div>`,
data: () => this.componentData
};
}
}
});
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<textarea rows="16" cols="40" v-model.lazy="jsonString">
</textarea>
<component :is="componentSpec"></component>
</div>
这篇关于在 Vue.js 中添加动态数据绑定文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!