vue
Cheryl71
这个作者很懒,什么都没留下…
展开
-
Uncaught TypeError: Cannot read properties of undefined (reading ‘toLowe
Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')解决方案原创 2022-07-15 10:40:49 · 28422 阅读 · 0 评论 -
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
当控制台报 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead. [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error. 修复方案原创 2022-07-13 19:42:57 · 575 阅读 · 0 评论 -
[Vue warn]: Avoid using non-primitive value as key, use string/number va
运行代项目发现vue报错控制台报错查看代码发现绑定是原始值,item为对象属性修改为绑定 string后不报错原创 2022-06-28 10:41:27 · 242 阅读 · 0 评论 -
ValidationError: Progress Plugin Invalid Options options should NOT have additional properties
ValidationError: Progress Plugin Invalid Options options should NOT have additional properties options should NOT have additional properties options should NOT have additional properties 报错解决方案原创 2022-06-23 14:37:00 · 6657 阅读 · 0 评论 -
v-for循环对象: v-for=“(value, key, index) in item“
<div v-for="item in data['obj']" :key="item"> <p v-for="(value, key, index) in item" :key="index"> <span >{{ index+1 }}. </span> <span >{{ key }} : </span> <span >{{ value }}</span&g原创 2022-05-05 11:31:49 · 820 阅读 · 0 评论 -
h5中引入vant-ui遇到的问题
引入组件,发现页面未成功渲染:代码:<div id="app"> <van-form @submit="onSubmit"> <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" /> <van-field v-model="password.原创 2022-02-14 16:38:55 · 706 阅读 · 0 评论 -
h5使用js上传图片并回显,h5使用vant-ui上传图片并回显
1. h5+js上传图片并回显2. h5+js+vue.js上传图片并回显3. h5+ vue.js+vant-ui上传图片并回显原创 2021-12-06 17:49:08 · 917 阅读 · 0 评论 -
vue使用qrcodejs绘制二维码(带中心logo)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue使用qrcode原创 2021-11-25 16:51:12 · 2232 阅读 · 0 评论 -
js+高德地图api实现地理定位
需求:使用高德地图进行签到思路:使用高德地图获取当前定位,比对与目标定位点距离,根据距离值判断是否定位成功创建api_key高德地图官方地址具体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=.原创 2021-10-18 18:21:43 · 2849 阅读 · 1 评论 -
使用vue实现样式切换
期望实现上图效果,点击时切换样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <s.原创 2021-10-08 11:37:40 · 1064 阅读 · 0 评论 -
使用v-model绑定数据,使用js传参赋值未成功
使用v-model绑定数据,使用event.target赋值未成功<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale.原创 2021-09-17 11:45:19 · 802 阅读 · 0 评论 -
macbook删除vue-cli preset
如图,在创建项目时,会有预设,如何删除呢?此时我们前往文件夹没有看到.vuerc文件,按住command+shift+. 显示隐藏文件夹打开该文件,清空preset再次创建项目,只有default preset了原创 2021-08-09 23:58:59 · 919 阅读 · 1 评论 -
前端将el-table中的数据导出成excel文件
下载FileSaver插件 链接在app.js中写入import saveAs from 'file-saver';Vue.use(saveAs)在需要导出的页面写入<el-table id="rebateSetTable" :data="tableDataSlackDetail" style="width: 100%;"> <el-pagination background @size..原创 2021-07-02 17:40:59 · 873 阅读 · 0 评论 -
基于php+laravel+vue环境下的前端上传excel并获取数据渲染到el-table中
下载插件XLSX,地址,推荐下载xlsx.full.min.js在需要导入excel的文件引入<script lang="javascript" src="{{ asset('js/xlsx.full.min.js') }}"></script>使用element-ui的el-upload组件上传文件<el-upload class="upload-demo" action :on-change="handleCh..原创 2021-07-02 17:32:27 · 506 阅读 · 0 评论 -
vue动态绑定class
<li v-for="(item,index) in processOptions" class="process-list-item" :class="{' is-active':isActive==index}" @click="toActive(index)" :key="index"></li>data(){ return { processOptions: [], isActive: -1,//默认不选中,为0时选原创 2021-06-24 14:58:23 · 162 阅读 · 2 评论 -
Property ‘blur‘ does not exist on type ‘Vue | Element | Vue[] | Element[]‘.
<div v-on:keyup.enter="search"> <template v-slot:activator="{ on }"> <v-text-field solo hide-details label="请输入关键词" append-icon="search" v-model="text" class="input-search" au原创 2021-06-10 17:15:04 · 779 阅读 · 0 评论 -
前端使用filter实现关键词查询
如下图所示,期望实现关键词查询<template> <el-table :data="tableData" style="width: 100%"> <el-table-column label="Date" prop="date"> </el-table-column> <el-table-column label="Name" prop="name"> </el-table-column> <e原创 2021-05-28 15:31:13 · 747 阅读 · 0 评论 -
v-for绑定v-model
原html<form ref="form" @submit.stop.prevent="handleSubmit"> <b-form-group v-for="(item, index) in addTaskForm" :key="index" :label="item.label" :label-for="item.labelFor" :invalid-feedback="item.invalidFe原创 2021-04-29 14:39:41 · 507 阅读 · 1 评论 -
如何在vscode中创建vue快捷键
mac通过Code->Preferences->User Snippets->vue.json 编辑win通过File->Preferences->User Snippets->vue.json 编辑官方示例如下,// Example:// "Print to console": {// "prefix": "log",// "body": [// "console.log('$1');",// "$2"// ],// "desc..原创 2021-04-19 17:18:07 · 347 阅读 · 0 评论 -
vue3+ts中使用echarts5.0
安装npm install echarts --save在要使用的页面引入import * as echarts from "echarts";容器配置<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> <el-card shadow="always" class="box-card"> <div class="chart-body"> <div .原创 2021-04-13 15:34:40 · 939 阅读 · 0 评论 -
Argument of type ‘HTMLElement | null‘ is not assignable to parameter of type ‘HTMLElement‘. Type ‘
在vue3.0+typescript+echarts5.0项目中,初始化图表,public myChart = echarts.init(document.getElementById("main"));控制台出现以下报错Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElem原创 2021-04-12 16:57:00 · 5262 阅读 · 3 评论 -
vue3.0项目,谷歌浏览器vue插件不亮
点此安装最新插件安装之后发现图标亮起,但是控制台无vue目前还没解决问题原创 2021-04-09 16:06:54 · 1202 阅读 · 0 评论 -
vue项目设置height:100%;
在app.vue中写入以下样式html,body,#app { height: 100%;}原创 2021-04-09 15:43:15 · 380 阅读 · 0 评论 -
el-input placeholder添加icon图标
如下图,使用el-input想在placeholder增加icon图标参考官方文档prefix-icon 输入框头部图标suffix-icon 输入框尾部图标代码示例如下<el-form-item> <el-input v-model="form.username" placeholder="请输入账号" prefix-icon="el-icon-user-solid" ></el-input></el-form-i原创 2021-04-09 15:41:37 · 2821 阅读 · 7 评论 -
修改el-card header padding值
想使header布满整个容器,发现有默认的padding值,需要修改为0,修改style,发现未生效,<style scoped>.el-card .el-card__header { padding: 0 !important;}</style>添加scoped情况下可以添加/deep/<style scoped>.el-card /deep/ .el-card__header { padding: 0;}</style>.原创 2021-04-09 10:20:23 · 5954 阅读 · 0 评论 -
使用vue@3搭配element-ui时页面报错
执行vue add element后,页面报错查看代码,此时element.js引用的是vue终端报错查看项目文件main.js代码目前还没找到解决方案原创 2020-09-11 16:18:42 · 1423 阅读 · 4 评论 -
vue3.0+element-plus构建项目遇到的问题
vue3.0+element-plus构建项目在使用el-menu与el-dropdown实现下拉菜单时,出现以下报错[Vue warn]: Unhandled error during execution of mounted hook Uncaught (in promise) TypeError: e.addEventListener is not a function查看代码需要改为用span包裹...原创 2021-04-07 11:02:58 · 1328 阅读 · 0 评论 -
warning Delete `␍` prettier/prettier
执行以下命令可修复npm run lint --fix原创 2021-04-07 10:18:24 · 1764 阅读 · 0 评论 -
vue-router跳转至新标签页
在原页面打开atClick(row) { console.log(row); this.$router.push({ path: "/nav/report", query: { id: row.id, }, }); return Promise.resolve(false); // 不刷新表格},在新页面打开atClick(row) { console.log(row); const { href } = this.$router.re原创 2021-03-31 16:09:03 · 1746 阅读 · 0 评论 -
使用vuetify实现导航菜单
菜单项menu: [ { index: "1", title: "首页" }, { index: "2", title: "博客", submenu: [{ itemIndex: "2-1", itemTitle: "消息" }], }, { index: "3", title: "程序员学院", }, {.原创 2021-03-31 15:07:39 · 2356 阅读 · 3 评论 -
vue+php删除文件
public function deletePpt(Request $request) { print_r($request->input('deleteItem'));// 1.指定public文件夹, 传递的是"2021-04 JavaScript高级程序设计第4版(1)(1).pdf"// $filesInFolder = File::files(public_path(''));// print_r($filesInFol原创 2021-03-30 15:12:12 · 157 阅读 · 0 评论 -
vue-cli更新最新版报错解决方案
使用npm uninstall vue-cli -g 卸载vue-cli的解决方案卸载原有vue-clisudo npm uninstall @vue/cli -g输入密码Password:安装最新版vue-clinpm install -g @vue/cli@版本号原创 2020-09-11 10:48:06 · 368 阅读 · 0 评论 -
mac环境下Google Chrome 安装vue插件后图标亮起但控制台无vue的解决方法
重新安装扩展程序后,右上方小图标亮起,但控制台无vue尝试方法:修改manifest.json文件“persistent":true修改后重新加载页面,控制台未出现vue点开自己基于vue开发的项目,发现控制台已经有vue了...原创 2020-09-04 13:12:18 · 770 阅读 · 0 评论 -
No module factory available for dependency type: CssDependency
如图,在test文件夹下的abcd项目执行 npm run serve操作在 terminal 输入以下指令,可以运行成功PS F:\test> cd abcdPS F:\test\abcd> npm run serve但在执行 npm run build 时会报错No module factory available for dependency type: CssDependency在执行打包时应该保持文件名完全一致,包括大小写,重新执行命令PS F:\test\abc原创 2021-03-26 11:17:53 · 757 阅读 · 0 评论 -
修复vue单页面应用直接访问url会出现404的问题
在网站根目录中创建一个 web.config文件,内容如下:<?xml version="1.0" encoding="UTF-8"?><configuration> <system.webServer> <rewrite> <rules> <rule name="Handle History Mode and custom 404/500" stopProcessing="true"> <mat原创 2021-03-24 10:01:27 · 1231 阅读 · 1 评论 -
vue-router传参
1.vue-router传参extraButtons: [ { type: "success", text: "查看", atClick(row) { console.log(row); }, },],在父组件点击查看按钮传递参数给子组件方法1:直接传参// atClick(row)+this.$router.push({ path: `/info/${id}` });// router//原创 2021-03-23 17:57:14 · 375 阅读 · 0 评论 -
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event. Consider mark
控制台提醒[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.解决方法:1.终端输入npm i default-passive-events -S2.main.js中加入:import 'default-passive-原创 2021-03-23 16:38:42 · 356 阅读 · 1 评论 -
使用el-menu, vue-router进行路由跳转
html<el-menu router @select="handleSelect" :default-active="this.$router.path" > <el-menu-item index="/"> 首页 </el-menu-item> <el-submenu index="1"> <template slot="title">页面导航</template>原创 2021-03-23 12:03:52 · 1828 阅读 · 0 评论 -
npm run build error: No module factory available for dependency type: CssDependency
如图,在test文件夹下的abcd项目执行 npm run build操作在 terminal 输入以下指令,可以运行成功PS F:\test> cd abcdPS F:\test\abcd> npm run serve但在执行 npm run build 时会报错No module factory available for dependency type: CssDependency在执行打包时应该保持文件名完全一致,包括大小写,重新执行命令PS F:\test\abc原创 2021-03-19 10:24:31 · 706 阅读 · 0 评论 -
vue项目中,配置公共函数
const base = {};import axios from './http';base.sendGetReq = function sendGetReq(params, url, callback) { let request = { params: params }; let promise = axios.get(url, request) promise.then((response) => { callback(response) }).cat原创 2021-03-15 18:30:42 · 235 阅读 · 0 评论