vue的data用到this问题
问题:在vue中用vue-awesome-swiper,在data中初始化,用到swiper一个方法onTap,然后再调vue的一个函数,用到this,可是。。。
data() {
return {
baseUrl:baseUrl,
imgList:[],
this.swiperOption={
pagination: '.swiper-pagination',
direction: 'horizontal',//滑动方向:水平 垂直:vertical
slidesPerView: 1,//slider容器能够同时显示的slides数量
paginationClickable: true,
spaceBetween: 30,
autoplay: 3000,
loop: true,
speed: 1000,
onTap: function(swiper,event){
我要在这里用到vue的数据和方法
}
}
}
},
解决方法:
`data() {
return {
baseUrl:baseUrl,
imgList:[],
swiperOption:{},
}
},
created(){
var _this = this
_this.swiperOption={
pagination: '.swiper-pagination',
direction: 'horizontal',//滑动方向:水平 垂直:vertical
slidesPerView: 1,//slider容器能够同时显示的slides数量
paginationClickable: true,
spaceBetween: 30,
autoplay: 3000,
loop: true,
speed: 1000,
onTap: function(swiper,event){
var curPath = event.target.currentSrc.split(_this.baseUrl)[1];
_this.getIndex(curPath)
}
}
},`
在data里先来一个空对象,在created中再来赋值,换一个思路解决!
vue的data用到this问题的更多相关文章
- vue的data的数据进行指定赋值,用于筛选条件的清空,或者管理系统添加成功后给部分数据赋值为空
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue bug & data type bug
vue bug & data type bug [Vue warn]: Invalid prop: type check failed for prop "value". ...
- Vue 组件 data为什么是函数
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...
- VUE:data数据中,能被网页渲染出来的数据类型有哪些
我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...
- vue组件data函数
vue组件data通常定义为一个函数并return一个对象,对象中定义的就是组件数据,当然定义数据还有props.computed等方式. data如果直接定义为对象data: {message: ' ...
- 为什么vue里面data里面的对象,无法用delete删除属性
因为vue里面的data是用get赋值的,所以无法用delete, 这时你可以用Object.defineProperty() Object.defineProperty(basic,'photo', ...
- Vue中data返回对象和返回值的区别
速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...
- vue 需求 data中的数据之间的调用
我遇到过这种情况 就是在我的data中 会有数据调用data中的其他数据 如图 我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不 ...
- Vue 组件 data为什么是函数?
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...
随机推荐
- BZOJ 1085 [SCOI2005]骑士精神 【A*启发式搜索】
1085: [SCOI2005]骑士精神 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 2838 Solved: 1663 [Submit][St ...
- Communications link failure
针对数据库Communications link failure的错误,可以理解为有两种策略解决: 策略1(推荐): 数据池配置 <property name="minEvic ...
- [BZOJ1106/POI2007]Tet立方体大作战
Description 一个叫做立方体大作战的游戏风靡整个Byteotia.这个游戏的规则是相当复杂的,所以我们只介绍他的简单规则:给定玩家一个有2n个元素的栈,元素一个叠一个地放置.这些元素拥有n个 ...
- [PKUWC2018]随机算法
题意:https://loj.ac/problem/2540 给定一个图(n<=20),定义一个求最大独立集的随机化算法 产生一个排列,依次加入,能加入就加入 求得到最大独立集的概率 loj25 ...
- java AES 加密解密工具(Advanced Encryption Standard)发现明文相同但每次重启服务后密文就会不同于是有了改进
1.通用方法 package com.qlkj.hzd.commom.utils; import javax.crypto.*; import java.io.UnsupportedEncodingE ...
- Codeforces Round #402 (Div. 2) A B C sort D二分 (水)
A. Pupils Redistribution time limit per test 1 second memory limit per test 256 megabytes input stan ...
- 注册google账号时出现手机号的问题
注册谷歌账号时出现此电话号码无法用于进行验证 这主要是86和手机号之间有一个空格造成的,把这个空格删除就可以了
- python删除文件
删除qq文件夹中2013年12-31之前的文件import os import time import datetime timeline = datetime.datetime(,,) tl = t ...
- POJ 3984 BFS
迷宫问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20665 Accepted: 12100 Descriptio ...
- java 面向对象编程(OOP)
java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改: 代码复用: 增加代码的可靠性和灵活性: 增加代码的可理解性. 封装 封装 ...