每当用户更换幻灯片时，我都试图让刷卡器更新其他组件。我将其记录到控制台上以记录滑动，它告诉我幻灯片的编号已打开，但是每次尝试调用其他方法时，我都可以渲染显示为
的其他组件挂接的钩子中出现错误：“ TypeError：this.dbPullData不是函数”
这是我的刷卡模板：
<swiper :options="swiperOption" ref="mySwiper">
<!--<swiper-slide v-for="(slide, i) in activeTagData" :index="i" :key="i">-->
<swiper-slide v-for="(slide, i) in activeTagData" :index="i" :key="i">
<!-- <img :src="slide.img_url" @click="getAllCampaigns(slide)"> -->
<!--<img :src="slide.img_url" @click="dbPullData(slide)"> -->
<!-- Trying to get the z-axis -->
<img :src="slide.img_url" @click="dbPullData(slide)">
<p style="text-align: center; font-size: 20px;">{{slide.tag_name}}</p>
</swiper-slide><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
这是我的刷卡属性：
swiperOption: {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
initialSlide: 2,
on: {
// Will trigger if the slide has changed
slideChange(slide){
console.log(this);
console.log('onSlideChangedEnd', this.activeIndex);
console.log(this.slide);
this.dbPullData(slide);
//this.updatingInfo();
}
},
并且dbPullData位于方法之下。
方法：
methods: {
testing() {
console.log('we are hitting hte proper function now lets go ahead and put all the data in there');
},
fetchData() {
// replace `getPost` with your data fetching util / API wrapper
//this is calling the auth controller and getting the info about the user.
this.axios.get("/auth/user").then((response) => {
// console.log('this is the response from fetchData');
// console.log(response);
//this is calling the grabClient function
this.grabClientFbResults(response);
}).catch(error => {
console.log(error);
});
},
// When the user moves the slide this is going to trigger
updatingInfo(){
console.log('Updating info is working');
},
// getDates() {
// this.axios.get('/grabdates').then((response) => {
// this.dates = response.data;
// // console.log(this.dates);
// }).catch(error => {console.log(error);
// });
// },
grabClientFbResults(data) {
//this.user is the user object which will will pass with the auth/client route.
this.user = data.data.data;
// console.log(this.user);
// this post grabs all of the active campaigns from the db.
this.axios.post("/auth/client", this.user).then((response) => {
//this.data is the active campaigns.
this.data = response.data;
console.log('this is the repsonse from grabClientFbResults');
console.log(this.data);
//this is the active campaign.
this.userActiveCampaigns = this.data[0].active;
// this.userInactiveCampaigns = this.data[0].inactive;
//this is all drug info in the db under drug.(it is a obj)
this.allDrugs = this.data[0].adaccounts;
//We are looping thru the lenght of the active campaigns array.
for (let i = 0; i < this.userActiveCampaigns.length; i++) {
//this is the tag name
let activeTag = this.activeTagNames.indexOf(this.userActiveCampaigns[i].tag_name);
//if there is not index(is not in the array) then it will push it into the array.
// pushes the ad account id ,tag name, img, drug name.
//
if (activeTag == -1) {
this.activeTagNames.push(this.userActiveCampaigns[i].tag_name);
for (let j = 0; j < this.allDrugs.length; j++) {
if (this.userActiveCampaigns[i].ad_account_id == this.allDrugs[j].ad_account_id) {
this.activeTagData.push({'tag_name': this.userActiveCampaigns[i].tag_name,
'ad_account_id': this.userActiveCampaigns[i].ad_account_id,
'img_url': this.allDrugs[j].img_src,
'drug_name': this.allDrugs[j].drug_name});
}
}
}
}
// Verifying the length of the data to show the charts.
if(this.activeTagData.length >=3) {
this.dbPullData(this.activeTagData[2]);
} else {
this.dbPullData(this.activeTagData[0]);
}
}).catch(error => {
console.log(error);
});
},
// function to put the commas on the numbers
addCommas(number) {
console.log('Entering the function');
if(number === undefined) {
return '';
}
var parts = (number + "").split(".");
console.log('Parts');
console.log(parts);
var integerPart = parts[0];
var decimalPart = parts.length > 1 ? parts[1] : "0";
while(/(\d+)(\d{3})/.test(integerPart.toString())) {
integerPart = integerPart.replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
if(parts.length==1){
return integerPart;
}else{
return integerPart + "." + decimalPart;
}
},
dbPullData(campaign) {
//these array reset the table data
this.tableData = [];
this.last30Data = [];
this.last7Data = [];
this.yesterdayData = [];
this.datepreset = 'this_year';
console.log(campaign);
//This happens when you click on a img. you are sending all of the tag data to the controller.
this.axios.post('/pullfromdb', {'tag': campaign}).then((response) => {
console.log('You are clicking');
console.log('response from the DB call');
console.log(response.data);
// Getting to put the commas
console.log('response data array');
console.log(response.data[1]);
console.log('going inside for loop.');
var i = 0;
for(i = 0; i < response.data[1].length ; i++){
console.log(response.data[1][i]);
var number = response.data[1][i];
var numberWithCommas = this.addCommas(number);
//response.data[1][0] = 3;
console.log(number);
console.log('Number with commas ' + numberWithCommas);
response.data[1][i] = numberWithCommas;
}
感谢您的帮助。我从字面上看没有运气。
答案 0 :(得分：0)
尝试一下？
slideChange: ((slide) => {
this.dbPullData(slide);
}),