Question

我是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.

该怎么办？

Answer 1

感谢@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，以便它可以编译模板。

VueJS js如何显示动态表单

1 个答案: