![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
sven_chen93
前端求学者
展开
-
vue知识自己备用(持续更新)
一、 当前路由切换this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, methods: 'check', pageType: 'view' }})二、页面多个表单校验try { await Promise.all([ this.$refs.preStepForm.validate(), this.$refs.fileForm.validate(), ]);}原创 2022-05-14 15:34:53 · 192 阅读 · 0 评论 -
Vue2.0数据双向绑定(响应式系统)的实现原理
/**@name Vue2.0数据双向绑定(响应式系统)的实现原理*/// observe方法遍历并包装对象属性function observe(target) {// 若target是一个对象,则遍历它if (target && typeof target === “Object”) {Object.keys(target).forEach((key) => {// defineReactive方法会给目标属性装上“监听器”defineReactive(targ原创 2022-05-14 10:04:43 · 160 阅读 · 0 评论 -
vue路由跳转打开一个新的页签
路由跳转打开一个新的页签,自己Mark下let routeData = this.$router.resolve({ name: 'personDetail', query: { id: row.id, },})window.open(routeData.href, '_blank')原创 2021-08-21 15:38:51 · 1265 阅读 · 0 评论 -
el-select 两个下拉框选项互斥
// 两个相同选项的值互斥<el-select v-model="valueA" multiple placeholder="请选择"> <el-option v-for="item of zsSelect" :key="item.id" :label="item.name" :value="item.id" :disabled="hasInclude(valueB, item.id)" /></el-select>在这里插入代码片原创 2021-08-21 15:34:27 · 1903 阅读 · 0 评论 -
flvjs在IE加载报错问题
最近发现之前使用的flvjs插件,在IE11上报错的问题,报错内容如下:报的语法错误 at ./node_modules/flv.js/src/utils/polyfill.js 。遇到问题的第一时间,我也是百度找问题,但是上面都是说不支持IE11的视频推流,好吧我这边就和产品说:1.换插件,2.提示用户使用其他浏览器;最终还是需要兼容IE11,没办法,后续让同事帮忙看下并修改,我在忙其他的项目后面同事大佬在GitHub上找到flvjs的仓库,然后到里面找issue,最后找到了问题的原因并找到了解决原创 2021-07-25 17:00:54 · 629 阅读 · 0 评论 -
vue 过滤器filter设置
有时间需要编写一些过滤器,这边Mark下// filters.js文件const bdStatus = (value) => { const statusMap = { 1: '正常', 2: '异常', 3: '终止', 4: '暂停', } return statusMap [value] || value}export { statusMap }下面在main.js中定义:// main.js原创 2021-04-14 18:33:24 · 191 阅读 · 0 评论 -
vue父组件调用动态子组件的方法
有时候父组件需要直接调用子组件的方法<!-- 父组件引用子组件son --><template> <div> <div> <button @click='refreshBtn'>刷新son数据</button> </div> <son ref="son"> </son> </div></template><script> m原创 2021-04-10 17:14:44 · 939 阅读 · 2 评论 -
vue同一组件在不同路由下展示不同样式
vue现在很多组件是相互间引用的,但是在不同组件中展示的样式怎么调试呢<div class="baseClass" :class="[{'specialClass':$route.name =='home'}]"></div>基础样式类在baseClass中定义,区别于其他组件,home路由中多了这个样式’specialClass’渲染。这样就支持在不同路由下,样式展示不一样了。...原创 2021-04-10 16:58:42 · 1443 阅读 · 0 评论 -
通过ref属性,父给子快速传值
最近在项目中看到一种新的父给子传值的方式,觉得很快捷迅速,记录一下1.下面是我们通常父给子组件传值的方式<template> <div id="app"> <users :users="usersData"></users> </div></template>2.下面是直接通过ref来传值<template> <div id="app"> <users ref="so原创 2021-02-07 11:50:52 · 823 阅读 · 0 评论 -
el-table表格数据变化,页面不更新问题
最近在做列表首页时,根据条件切换当前table,但是数据更新后,页面不刷新问题尝试了几种方法,还是没效果 1. 在nextTick中使用this.$refs.table.doLayout() 2. 在data赋值前清空tableData 3. 强制刷新:this.$forceUpdate()后面在blog中看到某位大佬的方法,给table加个key,页面就能更新了,所以Mark下<el-table ref="table" :data="tableData" :ke原创 2020-12-08 20:03:02 · 30831 阅读 · 34 评论 -
Vue组件间通信6种方式(转载)
Vue组件间通信6种方式摘要: 总有一款合适的通信方式。作者:浪里行舟Fundebug经授权转载,版权归原作者所有。前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了 vue 组件间通信的转载 2020-09-29 10:37:20 · 286 阅读 · 0 评论 -
Vue中数组更新,达到更新数组的几种方法
最近面试和平时工作中,改变了数组内的值,但是页面没有重新渲染,今天记录下解决方法直接修改不生效,代码如下<template> <div> <h2>数组展示:{{testArr}}</h2> <button @click="changeArr">修改数组</button> </div></template><script> export default { name: "fu原创 2020-08-26 10:32:27 · 19143 阅读 · 5 评论 -
vue axios post报400,返回两次错误信息
最近用vue 2.x + axios请求时,请求报400时,请求会报两次错误,相应拦截器会走两次,就是请求一次,相应拦截器会走两次;主要是只有请求报错时才会出现这个问题,请求200就不会出现问题。之前把问题发到了思否上,现在整过来记录下这是我在main.js里面设置的响应拦截器:axios.interceptors.response.use(function(res) { c...原创 2020-04-05 17:01:22 · 1299 阅读 · 0 评论