代码之家 › 专栏 › 技术社区 › minisaurus

vuejs如何显示动态表单

vue.js

minisaurus · 技术社区 · 6 年前

我是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 回复 | 直到 6 年前

minisaurus 6 年前

多亏了@boussadjara 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 'vue/dist/vue.js 以便它编译模板。

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前