开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >VueJS js如何显示动态表单

问VueJS js如何显示动态表单
EN

Stack Overflow用户

提问于 2019-01-27 14:27:35

回答 1查看 372关注 0票数 1

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

该怎么办呢？

EN

回答 1

Stack Overflow用户

发布于 2019-01-27 15: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，以便它可以编译模板。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54389186

复制

相关文章

JS动态添加表单

<script type=”text/javascript”> function addRow()<!–js实现添加一行内容!–> { var tr=document.createElement(“tr”); var td=document.createElement(“td”); var input=document.createElement(“input”); input.setAttribute(“type”,”file”); input.setAttribute(“name”,”image[]”)

苦咖啡

2018/05/07

13.8K0

js获取现在时间_js中如何动态显示日期时间

https 网络安全 java

js可以通过Date对象获取当前日期和时间，使用Date()获取系统当前时间，在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间，在使用innerHTM方法显示。

全栈程序员站长

2022/09/27

26.4K0

js获取现在时间_js中如何动态显示日期时间

如何动态加载js？

第三方的js文件，自己写的js文件，js越来越多了怎么办？提出问题： 1、js文件太多了，每个页面都写<script src="...">太麻烦。 2、如果路径变化了，或者js名称变化了怎么办？每个页面都改一遍吗？ 3、如何约束js文件的加载顺序？a.js定义了一个函数，b.js要调用，但是b.js先加载了，a.js还没加载完成，造成函数未定义，无法调用。 4、js文件的合并。开发阶段，js会分成多个文件，这样便于开发。但是成熟了之后会合并成一个文件。这样引用方式就会变化，原先引用一堆js，现在只需要引用

用户1174620

2018/02/08

12.9K0

js实现HTML页面时钟动态显示

代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body οnlοad="startTime()"> <script> // var date = new Date(); // date.setFullYear(2010,1,11) // document.write(date) //时钟 function startTime() {

开心分享

2020/08/05

7.7K0

js实现HTML页面时钟动态显示

var mytime =setInterval(function () {getTime();},1000);function getTime() {var d =new Date();var t =d.toLocaleTimeString();document.getElementById("ptime").innerHTML =t;}

开心分享

2021/04/07

5.4K0

Angular 动态表单

typescript angularjs

开发过程中，表单是最常用处理数据的窗口。其出场率居高不下。每个表单都要去写HTML，CS, JS。还要验证。让本就枯燥繁琐的开发更显无趣。

treeNewBe

2020/06/20

3.2K1

如何是HTML页面中的表单居中显示[通俗易懂]

https java 网络安全

在进行前端页面设置的时候，发现写完的form表单始终无法居中显示，详细如图1所示：

全栈程序员站长

2022/09/20

7.8K0

如何是HTML页面中的表单居中显示[通俗易懂]

通常很多表单都有一个“重置”按钮，虽然现在我看到它被越来越少地使用。 reset按钮是一个输入元素，type=”reset”: <input type="reset"> 也可以使用JavaScript编程地重置表单。你所需要的是表单元素引用: const form = document.querySelector('form') 接下来调用reset方法： form.reset() 这将清除表单中的所有元素，并将它们恢复到原始状态。

IT工作者

2022/01/06

5.3K0

antdv动态表单组件

分享一个自己写的antdv动态表单组件  <template> <div> <div v-for="(item, index) in value" :key="item[rowKey] || index"> <a-row> <a-col :span="24"> <slot :item="item"> <a-row v-if="column.length" v-bind="flex">

阿超

2022/08/21

9530

如何使用FormKit构建Vue.Js表单

渲染表单工具工作开发

在本文中，我们将探讨使用FormKit的好处，并提供一个逐步指南，教你如何使用这个强大的工具构建表单。请继续阅读，了解FormKit如何帮助您简化表单构建过程，更快地构建更好的表单！

前端达人

2023/09/11

4490

如何使用FormKit构建Vue.Js表单

vue动态生成表单_vue element 表单验证

html https 网络安全

前几天接了一个需求，需要动态生成一个表单数据，然后提交，提交完数据后。通过编辑按钮进入时，需要进行数据回填。

全栈程序员站长

2022/11/17

2.5K0

vue动态生成表单_vue element 表单验证

Js表单验证整理

1.手机验证[验证13系列和150-159(154除外)、180、185、186、187、188、189几种号码，长度11位] function isMobel(value) { if (/^13\d{9}$/g.test(value) || (/^15[0-35-9]\d{8}$/g.test(value)) || (/^18[05-9]\d{8}$/g.test(value))) { return true; } else { alert('请输入

磊哥

2018/05/09

9.9K0

JS如何使用隐藏控件为表单添加参数

在一些前端动态网页的表单里,并不是所有的参数都需要填写或选择,有些需要隐藏起来,然后跟着小单一起提交传递给后台,发送到服务器端

itclanCoder

2023/02/26

11.1K0

JS如何使用隐藏控件为表单添加参数

ElementUI动态添加表单项

渲染 button el 表单数组

chao超的搬运文章

2023/10/15

3070

Web表单开发之实时格式化显示——Cleave.js

javascript tcp/ip

Cleave.js是一个帮助表单实现各种复杂实时格式化显示的工具库，可以说Cleave.js让表单的输入变得更加的高逼格，能实现很多复杂的表单格式化显示，简而言之就是针对<input/>标签按照诸如千分位、电话号码等风格的特定显示！

IT大咖说

2020/12/29

2.2K0

Web表单开发之实时格式化显示——Cleave.js

编程算法 php

实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

陈不成i

2021/07/27

4.4K0

vuejs之vue.js+axios结合使用

vue.js https javascript 网络安全 node.js

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

西西嘛呦

2020/08/26

1K0

js form表单提交(jsp form表单提交方式)

java https 网络安全

最近工作比较忙，着急上线，写个简单的东西吧 url为你要提交的地址 params 为你提交的参数

全栈程序员站长

2022/07/30

14.8K0

JS如何为表单聚焦控件设置醒目的样式

编程算法 vue.js

在用户填写表单时,为了让用户集中精力填写或某一个表单控件,可以通过设置此空间的样式来达到目的

itclanCoder

2023/02/26

7.2K0

JS如何为表单聚焦控件设置醒目的样式

firefox中用js提交表单

action document form getelementbyid submit

4).form 中所有的组件（按钮，文本框等）的 name/id 也不能命名为”submit” # 当提交按钮的 name 或者 id 为 submit 时候，用 js 提交表单，表单名.submit () 时候会报一个错误，提示对象不支持此属性或办法。

零式的天空

2022/03/16

7.2K0

相似问题

VueJS动态添加表单组件

329

如何在vuejs中动态构建表单

21

如何提交VueJS动态表单数据？

11

如何用Laravel + VueJS动态改变表单动作

21

VueJs +动态表单字段验证

17

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例