Swiper Records the troubleshooting of Vue application

This is the fourth day of my participation in the August Text Challenge.More challenges in August

Swiper Records the troubleshooting of Vue application

Recently in learning Vue, I found a problem in the development of a requirement. The image of the rotation map was not updated after the language switch. I made a record in the process of solving the problem.

The first step is to introduce common properties in components that are configured in different languages under the Common folder

const state = reactive({
    imgs: {
        btnIcon: tc('message.btnIcon'),
    }
})
Copy the code

Use pictures

<img class="center-icon" :src="imgs.btnIcon" alt="" srcset="">
Copy the code

The picture is displayed, but it is not updated with the language switch. The cause is found after troubleshooting, and watch is needed to monitor state changes.

First we create a new file to store our lanStore

import { createStore } from 'vuex';
const {locale} = i18n.global;
export default createStore({
    state: {
        langchanged: locale
    }
});

Copy the code

Register mutation to change our store (you cannot call a mutation handler directly. This option is more like event registration: “This function is called when a mutation of type INCREMENT is triggered.” To wake up a mutation handler, you call the store.mit method with the corresponding type.)

mutations: { langChange(state, payload) { state.langchanged = payload; }}Copy the code

Declare an action that accepts a context object with the same methods and properties as the store instance, so you can submit a mutation by calling context.mit, Or use context.state and context.getters to get state and getters.)

Action is similar to mutation, except that:

The Action commits mutation rather than a direct state change.
Actions can contain any asynchronous operation.

actions: {
    langChange(mu, payload) {
        mu.commit('langChange', payload);
    }
}

store.dispatch('langChange', curLang);
Copy the code

Ok solved the problem, but found a compatibility issue with swiper (no

After switching languages, the first two images and the last one displayed are not updated. No error is reported during the check. The debug checks that all data flows are normal. (My online friends reflected the first and last images, but I checked carefully and found that the first two images were not updated.) I later learned that loop was enabled, so the cached elements would not change when the elements were dynamically updated.

Two attributes were found while reviewing the documentation

ObserveParents Monitor swiper parent changes observe Monitor swiper parent and child changesCopy the code

But without solving the problem, continuing the search found a callback that seemed to solve the problem 😌 onSlideChangeEnd(swiper), the callback function swiper3 starts to enable and swiper is executed when it transitions from one slide to another at the end of the slide. Swiper instance can be accepted as parameter. It doesn’t quite fit my needs, but, in the spirit of saving what you can, try it first

Since the project uses swiper5 and Vue3 doesn't have this, I'll write it like this on: {slideChangeEnd: function(swiper){swiper.update(); swiper.reLoop(); }}Copy the code

Sure enough, still no effect! But I tried vue2 + Swiper4 and the update works normally. I am so sad. Know the friend can comment below! Then there is the old business, operating DOM/(omega • omega •)


setup(){
   ...
   return {
       updateSwiper
   }
}

updated() {
    this.updateSwiper();
}

Copy the code

Then there’s the function to update the DOM

const updateSwiper = () => {
        const all = document.getElementsByClassName('s-slide');
        all.forEach((res) => {
            const eleObj = res.attributes['data-swiper-slide-index'];
            const eleIndex = elementInxObj.value;
            res.firstChild.setAttribute('src', state.imgs[`swiper${elementIndex - 0 + 1}`]);
        });
    };
Copy the code

Hey, feel good.

The problem is solved, but the solution is really not optimal, positioning the problem ideas also need to be optimized.

Swiper Records the troubleshooting of Vue application