methods - 从 swiper onSlide 更改访问我的组件的其他方法

Question

每当用户更改幻灯片时，我都试图让刷卡器更新其他组件。我让它控制台记录滑动，它告诉我幻灯片的编号，但每次我尝试调用另一个方法时，我可以渲染它说的另一个组件

挂载钩子错误：“TypeError：this.dbPullData 不是函数”

这是我的 swiper 模板：

 <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>

这是我的 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;

        }

谢谢您的帮助。我从字面上看到处都没有运气。

标签： methodsvue.jsswiper

Answer 1

尝试这个？

slideChange: ((slide) => {
    this.dbPullData(slide);
}),