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 ...
随机推荐
- [九省联考2018]IIIDX 贪心 线段树
~~~题面~~~ 题解: 一开始翻网上题解看了好久都没看懂,感觉很多人都讲得不太详细,所以导致一些细节的地方看不懂,所以这里就写详细一点吧,如果有不对的or不懂的可以发评论在下面. 首先有一个比较明显 ...
- 【BZOJ3240】【NOI2013】矩阵游戏(数论)
[BZOJ3240][NOI2013]矩阵游戏(数论) 题面 BZOJ 题解 搞什么矩阵十进制快速幂加卡常? 直接数学推导不好吗? 首先观察如何从每一行的第一个推到最后一个 \(f[i]=a·f[i- ...
- [POI2014]DOO-Around the world
通过几年的努力,Byteasar最终拿到了飞行员驾驶证.为了庆祝这一事实,他打算买一架飞机并且绕Byteotia星球赤道飞行一圈.但不幸的是赤道非常长所以需要中途加几次油.现在已知赤道上面所有飞机场, ...
- Mysql 语句优化技巧
前言 有人反馈之前几篇文章过于理论缺少实际操作细节,这篇文章就多一些可操作性的内容吧. 注:这篇文章是以 MySQL 为背景,很多内容同时适用于其他关系型数据库,需要有一些索引知识为基础. 优化目标 ...
- H5背景音乐自动播放(兼容微信IOS,进程后台切换自动停止播放,本文例子为Vue写法)
<template> <audio src="./static/music.mp3" id="bgMusic" preload="a ...
- Java HashMap工作原理及实现?
参考:http://yikun.github.io/2015/04/01/Java-HashMap%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE ...
- Ubuntu Android adb调试无法识别设备 -- List of devices attached ???????????? no permissions
在Ubuntu下做Android开发, 使用adb devices调试的时候出现在面的错误: 这个问题之前就出现过的,突然就忘了,Mark一下.在网上找了一下,基本上是一些比较麻烦的办法,但是在我的记 ...
- java重写equals和hashCode方法
一.重写equals方法 如果不重写equals,那么比较的将是对象的引用是否指向同一块内存地址,重写之后目的是为了比较两个对象的value值是否相等. 利用equals比较八大包装对象(如int,f ...
- DOM学习控件定位和案例
Dom中有多种定位属性,下面是一个简单案例 <html><!--制作一个会跟着鼠标走的图像,还有控件定位的案例--> <head> <title>doc ...
- [LeetCode] 12. Integer to Roman ☆☆
Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from 1 t ...