vue
关注
分享
扫一扫
ShiyuTim
这个作者很懒，什么都没留下…
展开
-
Duplicate keys detected: ‘xxxx‘. This may cause an update error.
在 Vue 项目中，控制台报如下错误： Duplicate keys detected: xxxxx'. This may cause an update error.这是因为，通过 v-for 遍历的数据，有相同的 key，导致的错误提示。所以解决办法就是寻找哪个地方数据重复了，有可能是两个地方相同遍历使用了相同的 key，这个解决办法可以添加个标识：`${item.id}-1``${item.id}-2`有可能是数组中存在两个一模一样的数据，需要看看代码写没写错。如果没有马上找到问题原创 2020-08-18 22:14:12 · 2442 阅读 · 0 评论 -
关于 select 分页获取数据优化
项目中，有个 select 下拉选择做成了分页的形式，就是默认请求第一页的数据，然后当用户下拉到底部的时候，在重新请求一个接口，页码 +1。这个做法有两个难点，第一个难点是你需要知道用户何时滚动到底部，并且调用接口获取数据；第二个难点是，比如说用户选择了第三页的某个 option，但是当你复原数据的时候，默认只请求第一页的数据，你直接赋值的话，会把用户选择第三页的值原封不动的显示在页面上。首先是如何知道用户滚动到底部，因为使用的是 Vue + element-ui，所以可以使用 Vue 提供的自定义指令原创 2020-08-15 10:33:08 · 1255 阅读 · 0 评论 -
前端上传图片，在本地加载时，有时显示正常，有时显示 404，以及在 Vue 中的解决办法
文章目录出现问题的过程解决办法出现问题的过程前端在上传图片的时候，需要在项目里面显示出用户上传过后的图片，但是实际中显示的时候，有时正常，有时加载失败同时控制台报 404 错误。在报 404 错误后，复制路径直接访问，却发现能够访问到这个图片，所以这就很奇怪了。秉着专研主义精神的我，必须要找到原因。于是我在控制台编辑这个图片的路径，先是改为错的路径，html 里会看到图片重新载入，然后加载失败，继续把路径改为正常的，html 重新加载后，显示正常。我突然想到，既然能够访问到这个图片，说明上传到服务器原创 2020-07-12 17:59:54 · 3586 阅读 · 0 评论 -
在 Vue 中多表单深层次嵌套结构，创建响应式属性，以及多层级表单验证
在 Vue 中多表单深层次嵌套结构，创建响应式属性，以及多层级表单验证文章目录在 Vue 中多表单深层次嵌套结构，创建响应式属性，以及多层级表单验证设置响应式属性表单验证设置响应式属性在 Vue 中，只有在跟级别中创建的属性，才具有响应式，如果后期手动添加，如使用 this.xxx = xxx这种方式创建的属性是不具有响应式的。在 Vue里面，封装了 7 个方法，使用如下的方法来添加属性，同样可以创建响应式属性，并触发视图更新：push()pop()shift()unshift()spl原创 2020-07-05 17:21:17 · 5790 阅读 · 0 评论 -
在 Vue 中使用粘贴板
在 Vue 中使用粘贴板有时候用户需要使用复制的功能。所以，我们使用一个插件来完成这个功能。首先需要安装 npm 包 vue-clipboard2。执行命令: npm i vue-clipboard2 --save在 main.js中，配置如下代码import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.u...原创 2020-02-19 16:09:00 · 2364 阅读 · 0 评论 -
Vue 项目出现 Refused to load the image 'http://localhost:8082/favicon.ico' 的问题
问题出现的原因是在我按需引入element-ui，然后先是下载babel-plugin-component这个插件，然后去配置.babelrc文件。在我按照步骤弄完了之后，npm run dev就显示了如题 中出现的错误，这个错误也是我第一次遇见，既然突然出现了这个问题，肯定是我以上操作产生了这个问题。我先是把.babelrc更改回来，发现可以，没有错误了，但是为了使用element-ui还是...原创 2020-01-02 06:13:17 · 2132 阅读 · 0 评论 -
关于element-ui loading 的函数封装和yield 封装
根据官方文档说明，element-ui提供了服务的方式调用。这里提供了两种封装方法。一种是使用函数封装，另一种是ES6的yield封装。创建一个loading.js文件，里面放入配置代码。第一种使用普通函数，有两种方式调用，根据传入的参数去判断是开启或关闭。这里开启传入start为开启，传入close为关闭。// loading.jsimport { Loading } from '...原创 2019-12-23 21:26:34 · 1121 阅读 · 0 评论 -
vue中 根据时间戳 判断对应的时间（今天 昨天 前天）
根据时间戳 来显示对应的时间段本文是根据vue缩写，但是原理都是想通的根据一个时间戳，然后来显示对应的时间段。如果为今天，则显示对应的time，如果为昨天，则显示为昨天，如果为前天，则显示为前天。剩下的显示为对应的日期需求定义好了，然后开始实现：首先，是把时间戳转换为对应的时间格式，js提供了原生的获取对应年、月、日等格式的方法，但是不够灵活，这里提供了一个网上找的比较灵活获取固定格...原创 2019-12-19 20:18:45 · 3203 阅读 · 0 评论 -
vue 项目打包上线后 js css 文件找不到
在vue项目完成后打包上线，放到服务器上发现js和css引入不到，页面加载不出来。需要在vue 项目的config文件夹的index.js文件里面配置对应的路径。build: { assetsPublicPath: '/xxx/' // 默认为'/' }...原创 2019-12-11 21:10:22 · 8237 阅读 · 0 评论 -
vue 中确定url中的参数
有个需求就是接口需要需要根据url中的参数，然后传递对应的值。比如说，url中的参数有两种情况，一种是?a=xxx，一种是?b=xxx，所以需要确定url中到底是a 还是b。比较简单直接放代码：// cmmmon.js const getUrl = url => { // 这里确认参数的时候不能`a`和`b`同时存在 if(url.includes('a'))...原创 2019-12-11 19:53:31 · 1704 阅读 · 0 评论 -
vue h5 ios点击屏幕不收起键盘
vue h5 ios点击屏幕不收起键盘在安卓下，点击屏幕能够正常的收起键盘，但是在ios下，点击屏幕是不会收起键盘的，那么就需要手动让他收起键盘。在网上查找一番后，看到一篇文章：https://www.cnblogs.com/binmengxue/p/5993166.html。受这篇文章的启发，我改良成vue版。原理就是：在ios下，键盘弹出，然后点击屏幕空白，键盘不会收起，其实就是in...原创 2019-11-29 22:13:54 · 2908 阅读 · 0 评论 -
vue h5 项目适配ios问题
vue h5项目适配ios的问题h5项目在安卓上运行正常，但是在ios上就出现问题1适配iphoneX以上型号底部栏遮挡的问题@media (min-device-height: 810px) { padding-bottom: .5rem;}2ios页面缩放问题在index.html页面<head>标签里面加入如下<meta> <meta na...原创 2019-11-15 22:18:52 · 2483 阅读 · 0 评论 -
使用Mint-ui 的Radio，最后一个元素底部出现一条线。
Mint-ui 中使用Radio，解决出现一条线的问题。在vue中，使用mint-ui，发现默认的radio选项都是column的。因为需要row的，所以需要转换一下位置。F12审查元素后，找到对应的class，为mint-radiolist，在<style>中进行如下覆盖样式.mint-radiolist { display: flex; flex-flow: row ...原创 2019-11-07 20:30:02 · 639 阅读 · 0 评论 -
Vue 项目在手机上预览
Vue 项目在手机上预览首先找到项目里面config => index.js，找到host: localhost，把localhost改为你的电脑的ip地址。（ip地址可以通过cmd输入命令ipconfig查看）修改完后，需要重新启动项目。（确保电脑和手机处于同一局域网内）手机输入带ip的网址，就可以访问了（带端口号）。...原创 2019-11-07 19:54:46 · 445 阅读 · 0 评论 -
Vue 调用微信支付接口配置 支付目录
Vue 调用微信支付接口 配置支付目录微信官方文档是这样说的：一、设置支付目录请确保实际支付时的请求目录与后台配置的目录一致（现在已经支持配置根目录，配置后有一定的生效时间，一般5分钟内生效），否则将无法成功唤起微信支付。在微信商户平台（pay.weixin.qq.com）设置您的JSAPI支付支付目录，设置路径：商户平台–>产品中心–>开发配置，如图7.7所示。JSAP...原创 2019-11-06 21:34:01 · 1100 阅读 · 0 评论 -
Vue更改数据页面不同步更新
Vue更改数据页面不同步更新在请求数据并写入页面后，需要更改其中一些属性值，但是更改的时候发现页面上并没有同步更新，使用vue的devtools工具进行手动测试也是不更新。官网上说需要使用vue,set()进行更新，于是使用vue.$set()进行更改数据，但是发现还是不行。于是搞了半天，发现只有我要改的这个属性值不能同步更新，别的值就能，数据已经改成功了，页面就是没有更新。更奇怪的是，发现...原创 2019-11-03 19:32:54 · 6405 阅读 · 0 评论 -
vue中使用import之后报错There are multiple modules with names that only differ in casing. This can lead to u
在vue中使用import后，浏览器报如下黄色警告信息There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal ca...原创 2019-10-30 22:38:11 · 501 阅读 · 0 评论 -
vue中报错 Property or method "xxxx" is not defined on the instance but referenced during render. Make
报如下错误：Property or method "XXXX" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by init...原创 2019-10-29 19:48:54 · 13057 阅读 · 1 评论 -
vscode 设置代码片段 Vue设置快捷模板
vscode 设置代码片段首先shift + ctrl + p输入snippet选择首选项：配置用户代码片段新建全局代码片段文件输入文件名vue结构代码片段{ "vue-template": { // vue-template 为快捷键的名字 // "scope": "vue-html", //这里可以设置作用域，只能在`<template>...原创 2019-10-28 19:54:15 · 1146 阅读 · 0 评论 -
Vue中同时使用v-html和filters过滤器
原本是定义一个过滤器用来过滤表情url，解析成img，但是当使用的时候，发现并不能同时使用，于是使用$options.filters.face(value)。// 原本是这样<span>{{ item.content | face}}</span>// 改成这样<span v-html="$options.filters.face(item.content...原创 2019-10-22 19:38:22 · 913 阅读 · 0 评论 -
Vue表单为空也能提交的问题
今天在用Vue写表单验证的时候，习惯性把v-model绑定的值设置为null，然后再测试的时候，发现如果填写了表单后，又删除输入的内容，竟然能提交上去，百思不得其解。最后通过vue devtools这个工具找到了问题所在。大概是这样写的<input v-model="ipt" />data () { return { ipt: null, }}i...原创 2019-10-21 20:15:24 · 2381 阅读 · 1 评论 -
Vue里点击按钮跳转页面总结，router.push router.replace router.go
总结一下在Vue里面跳转页面的方法首先是vue提供的router-link，使用后再页面里会转换为a标签<router-link to="/test">go home</router-link>使用函数进行任意页面跳转普通跳转<button @click="jump('/test')">Click Me</button> // ...原创 2019-10-02 17:42:29 · 4049 阅读 · 0 评论 -
Vue 使用 localStorage储存信息
Vue 使用 localStorage储存信息首先说一下cookies sessionStorage和localstorage三者的区别相同点：都存储在客户端不同点：存储大小：cookie数据大小不能超过4k。sessionStorage和localStorage。虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有效时间：localStorage...原创 2019-09-30 21:37:12 · 1254 阅读 · 0 评论 -
解决Vue请求接口出现跨域问题。Access-Control-Allow-Origin
解决Vue请求接口出现跨域问题在使用axios请求了接口后，发现并没有请求到，F12里面出现如下图所示的报错这是提示跨域了。所有使用JavaScript的浏览器都会支持同源策略。同源策略即指域名/协议/端口号相同。只要有一个不同，就会当作跨域请求。解决方法为：一种是让后端接口里添加如下两句代码：header('Access-Control-Allow-Origin:*');//允许...原创 2019-07-07 14:38:14 · 46933 阅读 · 9 评论