使用三方UI库时经常会遇到在data中写入方法的场景,如Element-UI的级联选择器(动态加载part)需要在data中写入lazyLoad.

但后端总会给出意想不到的需求:

通过接口调取一串数据格式如 [ { id: 1, name: '97z', code: 191, children: [] }, { id: 2, name: '4moon', code: 263, children: [] } ],现在进行映射 value -> id , label -> name

选择完毕后通过code入参调取另一个接口的数据赋值给另一个 Select 的 options,同样采用映射。

真正的大佬可能已经动手二次封装 Element-UI 的 Cascader 组件了,赶项目的情况就只能尽量抄些近道:

data() {
let _self = this
return {
lazy: 'i & vue.'
lazyLoad: (function () {
_self.lazy = ‘97z & vue.'
}())
}
} mounted() {
console.log(this.lazy)
// 97z & vue.
}

其实这样书写还不够严谨,因为我们可以用箭头函数将this抛出,在element的级联动态加载场景中,打印出来的this是指向data中的props(非彼props)的。

无论如何,通过在data() { } 函数体中,return { } 的包裹外储存this的指向,虽然这部分会造成内存泄漏,但占用较小在平常应用场景是可忽略的。

- END -

VUE005. 在data中使用 / 改变data,或在data中调用method函数的更多相关文章

  1. cocos2dx中使用tolua++使lua调用c++函数

    一直想学学cocos2dx中如何使用tolua++工具使得lua脚本调用C++函数,今天就来搞一下,顺便记录下来: 首先,我们打开cocos2dx-2.2.4中projects下的test的VS工程, ...

  2. 向ACCESS数据库中的表导入EXCEL表,在 System.Data.OleDb.OleDbException 中第一次偶然出现的“System.Data.dll”类型的异常

    向ACCESS数据库中的表导入EXCEL表,EXCEL表Sheet1中与ACCESS数据库表中的关键字对应的列的值,不能与数据库中表的主键项值重复,不然就会出现 在 System.Data.OleDb ...

  3. vue学习-day05 -- 案例:名字合并(监听data数据的改变)

    1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...

  4. 谈谈WCF中的Data Contract(3):WCF Data Contract对Collection & Dictionary的支持

    谈谈WCF中的Data Contract(3):WCF Data Contract对Collection & Dictionary的支持 在本篇文章上一部分Order Processing的例 ...

  5. 重新想象 Windows 8 Store Apps (24) - 文件系统: Application Data 中的文件操作, Package 中的文件操作, 可移动存储中的文件操作

    原文:重新想象 Windows 8 Store Apps (24) - 文件系统: Application Data 中的文件操作, Package 中的文件操作, 可移动存储中的文件操作 [源码下载 ...

  6. 关于“System.Data.OleDb.OleDbException,外部数据库驱动程序 (1) 中的意外错误。”的解决方案

    网站之前运行一直很正常,但有一次用户在导入格式为xls的excel文件,发生了错误,跟踪错误后抛出如下的异常: 错误提示: 未处理System.Data.OleDb.OleDbException HR ...

  7. 总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别

    一..attr()和.data()的区别: .attr()和.data()本质上属于DOM属性和Jquery对象属性的区别. 看一个例子: <!DOCTYPE html> <html ...

  8. Python+Post请求中涉及到多个参数data方法的应用

    进行post请求,Python提供了httplib.urllib2,同时也可以引用requests模块的一些方法.前几天做持续集成,运用requests写了一个post请求.代码如下: import ...

  9. Core Data系列文章(一)Core Data基础

    在iOS开发数据库SQLite的使用介绍了iOS中使用SQLite对数据进行持久化存储,实际上是对数据库直接进行操作,而苹果专门有一套API来间接的对数据进行持久化存储,而且主要针对用户创建的对象 - ...

随机推荐

  1. 随着日益增多的新技术,Android开发接下来的路该怎么走?

    很多小伙伴们经常问我android移动开发者的走向,一部分人都想多快好省,间歇性踌躇满志.持续性混吃等死 ,只想用CV的开发模式们快速完成工作,然后回家王者农药.其实这种现象很普遍,我想告诉你的是 , ...

  2. 【odoo】【知识点】生成pdf文件时缺少样式的问题

    欢迎转载,但需标注出处,谢谢! 背景 近期在客户的项目中发现在自定义报表样式的时候,存在渲染为html正常,但是在生成pdf的时候,缺少样式的情况. 分析 涉及到的odoo源码中的ir_actions ...

  3. Python函数调用中的值传递和引用传递问题

    这一问题O' Reilly出版的"Learning Python" 2nd Edition的 13.4 节有专门论述,对于不可变(immutabe)对象,函数参数(这里是x和y)只 ...

  4. vue源码解析之响应式原理

    关于defineReactive等使用细节需要自行了解 一些关键知识点 $mount时 会 new Watcher 把组件的 updateComponent 方法传给watcher 作为getter ...

  5. 授予mysql的其他用户数据库的使用权限

    场景:不同的开发人员有不同的数据库的权限:也可适用于外包公司不同的开发权限. root用户登录数据库,命令行执行下面语句即可. grant select,delete,update,create,dr ...

  6. DVWA靶场之XSS(Stored)通关

    Low: <?php if( isset( $_POST[ 'btnSign' ] ) ) { // Get input $message = trim( $_POST[ 'mtxMessage ...

  7. 【SpringMVC】SpringMVC搭建框架

    开发环境 IDE:idea 2019.3.2 构建工具:maven3.5.4 服务器:tomcat 9.0.30 Spring版本:5.3.1 创建maven工程 添加打包方式:war 引入依赖 &l ...

  8. WPF三维立体效果3D

    并不是真的3D,类似游戏的2.5D. 先上效果图. 变形一下也可以 起先我是想,把这种绘图啊啥的,都做成控件,给别人直接用就行了.但是做的过程中发现. 要做简单易用的控件,实在是花时间.  而且花的时 ...

  9. springboot与通用mapper的整合

    找到springboot工程下的pom.xml文件,导入如下的依赖jar包 <!--配置通用Mapper start--> <dependency> <groupId&g ...

  10. nginx 实现反向代理、负载均衡、高可用

    转自:https://blog.csdn.net/zy1471162851/article/details/91795712 tip:   nginx是一款高性能的http 服务器/反向代理服务器及电 ...