Vue前端项目问题归纳（新手）

豌豆code

已于 2022-10-17 23:04:02 修改

阅读量1.7k

点赞数

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

于 2022-10-15 23:53:46 首次发布

本文链接：https://blog.youkuaiyun.com/u014783334/article/details/127292508

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

1、JS中把对象object转换成String

2、JS中把String转成对象object

3、把proxy对象转成一般对象

4、Vue中网页展示json对象数据

5、Vue实现表单动态新增或删除（必填校验）

1、JS中把对象object转换成String

var b = JSON.stringify(obj)

在vue项目中，A页面跳转到B页面，并且传参给B页面显示

// A页面的js中,res.data是接口返回的对象数据

this.$router.push({ path: '/result', query: { msg: JSON.stringify(res.data) } })

// B页面获取数据

getinfo () {
      const mm = this.$route.query.msg
      console.log('resu==', mm)
    }

2、JS中把String转成对象object

JSON.parse(string)

3、把proxy对象转成一般对象

JSON.parse(JSON.stringify(proxyObj))

4、Vue中网页展示json对象数据

官方网站：https://www.npmjs.com/package/vue-json-viewer

安装：我是用的vue3

$ npm install vue-json-viewer@2 --save
// Vue2
$ npm install vue-json-viewer@3 --save
// Vue3

全局注册：

// main.js

import JsonViewer from 'vue-json-viewer'

app.use(JsonViewer)

// xxx.vue

<template>
  <div>
    <!-- json-viewer组件专门用来解析json对象的格式 -->
    <json-viewer :value="mas" :expand-depth=5 copyable boxed sort></json-viewer>
  </div>
</template>

效果图：

5、Vue实现表单动态新增或删除（必填校验）

效果图：

<script>
export default {
  data() {
    return {
      // 表单绑定对象
      paramForm: {
        dataLists: [
          {
            name: '', key: '', desc: ''
          }
        ],
        apiName: ''
      }
    }
  },
  created() {

  },
  methods: {
    // 新增列
    addModule() {
      // this.paramList.push(this.paramForm)
      // 上面这种写法，会导致新增的列，当输入值试，每列的值都一样，所以这里用下面写法
      this.paramForm.dataLists.push({ name: '', key: '', desc: '' })
    },
    // 删除列
    deleteModule() {
      this.paramForm.dataLists.splice(this.paramForm.dataLists.length - 1, 1)
    },
    createParam() {
      console.log('param=', this.paramForm.dataLists)
      this.$refs.paramFormRef.validate(valid => {
        if (!valid) { return '' }
        console.log('校验通过')
        console.log(this.paramForm)
      })
    }
  }
}
</script>

      <el-form ref="paramFormRef" :model="paramForm" :rules="paramFormRules" label-width="120px" class="demo-ruleForm" status-icon>
        <el-form-item label="接口名称">
          <el-input v-model="paramForm.apiName" />
        </el-form-item>
        <!-- 新增和删除表单项目 -->
        <div v-for="(item, index) in paramForm.dataLists" :key="index">
          <el-row>
            <el-col :span="6">
              <el-form-item label="名称" :prop="'dataLists.' + index + '.name'" :rules="{
              required: true,
              message: '名称不能为空',
              trigger: 'blur',
              }">
                <el-input v-model="item.name" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="KEY" :prop="'dataLists.' + index + '.key'" :rules="{
              required: true,
              message: 'key不能为空',
              trigger: 'blur',
              }">
                <el-input v-model="item.key" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="描述" :prop="'dataLists.' + index + '.desc'" :rules="{
              required: true,
              message: '描述不能为空',
              trigger: 'blur',
              }">
                <el-input v-model="item.desc" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button size="small" type="success" @click="addModule()">
                <el-icon :size="15"><Edit /></el-icon>
              </el-button>
              <el-button size="small" type="danger" @click="deleteModule()">
                <el-icon :size="15"><Delete /></el-icon>
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-button type="success" @click="createParam()">确定</el-button>
      </el-form>