VueJS js如何显示动态表单
VueJS js如何显示动态表单
提问于 2019-01-27 22:27:35
我是vue的新手，我有一个vue需要接收和显示不同的模板模型。
我尝试过这个(模拟一个输入域的动态注入)：
<template>
<b-container v-if="show">
<b-row>
<b-col class="map-dialog" cols="12" sm="6" md="4" >
<h3>{{ title }}</h3>
<component v-bind:is="fields"></component>
<b-button v-on:click="hide">Close</b-button>
</b-col>
</b-row>
</b-container>
</template>
<script>
import Vue from 'vue'
export default {
props: {
show: Boolean,
},
data() {
return {
title: null,
fields: null,
}
},
mounted() {
this.fields = Vue.component('fields', {
template: '<b-form-input v-model="text1" type="text" placeholder="Enter your name"></b-form-input>'
})
},
}这会给出一个错误：
[Vue warn]: You are using the runtime-only build of Vue where the template
compiler is not available. Either pre-compile the templates into render
functions, or use the compiler-included build.该怎么办呢？
回答 1
Stack Overflow用户
发布于 2019-01-27 23:41:20
感谢@Boussadjra Brahim的帮助，我找到了一个使用async components的解决方案。
以下是修改后的代码：
<template>
<b-container v-if="show">
<b-row>
<b-col class="map-dialog" cols="12" sm="6" md="4" >
<h3>{{ title }}</h3>
<FormFields/>
<b-button v-on:click="hide">Close</b-button>
</b-col>
</b-row>
</b-container>
</template>
<script>
import Vue from 'vue/dist/vue.js'
export default {
props: {
show: Boolean,
},
data() {
return {
title: null,
fields: null,
}
},
mounted() {
Vue.component('FeatureFields', function (resolve, reject) {
resolve({
template: '<b-form-input type="text" placeholder="Enter your name"></b-form-input>'
})
});
},
}我还需要将import Vue from 'vue'更改为从'vue/dist/vue.js导入Vue，以便它可以编译模板。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54389186
复制相关文章
相似问题
腾讯云开发者
