Vue 弹窗获取form表单输入的内容

最新推荐文章于 2024-05-14 00:10:03 发布

正在努力的谷同学

最新推荐文章于 2024-05-14 00:10:03 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/m0_37215251/article/details/117945751

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue应用中，当表单提交时通过弹窗显示form表单输入的内容。关键在于利用JSON.stringify()方法将表单数据转换为JSON字符串，以方便展示。然而，在尝试使内容换行时遇到问题，+操作符未能达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想实现的效果是在表单提交的时候弹出框显示输入的内容。
实现：
提交按钮绑定了一个open方法

主要代码如下：

 <el-form  @submit.prevent="submit" ref="form" :model="form" label-width="80px">
          <el-form-item label="类型">
            <el-input v-model="form.type" name='type' id='type'></el-input>
          </el-form-item
          <el-form-item label="重量(g)">
            <el-input v-model="form.weight"></el-input>
          </el-form-item>
         
          <el-form-item>
            <el-button type="primary" @click="onSubmit();open()">注册</el-button>
          </el-form-item>
        </el-form>
        
//——————以下是script里的内容———————
methods: {
      onSubmit() {
        console.log('submit!');
      },
      open() {
        this.$confirm('您输入的信息如下：' +' <br/> ' +'类型：'+ JSON.stringify(this.form.type) + ' <br/> ' 
        + '重量：' + JSON.stringify(this.form.weight) + ' <br/> ' , '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认注册',
          cancelButtonText: '放弃',
          dangerouslyUseHTMLString: true
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '注册成功'
            });
            this.form={brand_right:0}
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃注册'
                : '停留在当前页面'
            })
          });
      }
    },

主要是这个：JSON.stringify()

JSON.stringify(value[, replacer[, space]])
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
参数说明：

value:
必需，要转换的 JavaScript 值（通常为对象或数组）。

replacer:
可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。

space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

返回值：
返回包含 JSON 文本的字符串。

其中我想让内容换行，尝试了+

'\n'  
'\r'   
'\r\n'  
'\n\r' 
'\u000d'

都不管用
结果是这个：' <br/> '