Slick. js не работает при обновлении v-for - PullRequest
Новая
       25

Slick. js не работает при обновлении v-for

0 голосов
/ 24 января 2020

Привет, я использовал VueJS и пятно js. Слик работает нормально, пока v-for не обновится. Я обновляю v-for, когда нажимаю на событие и отправляю ajax. Новые данные хранятся на том же объекте, который использует v-for. V-for обновления и все слайды видны, и пятно не работает.

введите код здесь 

<div class='slickItem'>
    <div v-for="place in destinations" :key="place.id">

    <!-- Single item -->
    <div class='singleItem'>
      <div class='backPic' :style='{background : "url(/images/"+ place.tags +"/" + place.image + ".jpg)"}'>
          <div class='location'>
               {{place.location}}
          </div>
          <div class='countryDiv'>
              <span class='locationIcon'></span>
              <span>
                 {{place.country}}
              </span>
          </div>
        </div>
     </div>
   </div>
</div>
<script>
data(){
    return {
        id : undefined,
        image : undefined,
        locattion : undefined,
        country : undefined,
        tags : "Experiences",
        destinations : undefined
    }
},
created(){
    this.getData();
},

updated(){
    $('.slickItem').not('.slick-initialized').slick({
        infinite: true,
        slidesToShow: 3,
        arrows: false
    });
},

methods : {
    getData(){
        this.destinations = false;
        this.axios.get('/api/destinations/tags/' +                         this.tags).then((response) => {
            this.destinations = response.data;
            console.log(this.destinations);         
        })
    },
      //Update ajax
    changeTag(tag){
        $(".slickItem").slick("unslick");
        $('.slickItem').html('')
        this.tags = tag;
        this.getData();
    }
}
</script>

1 Ответ

0 голосов
/ 24 января 2020

Я предполагаю, что код, который вы используете в хуке updated, - это то, что вы хотите запустить при изменении данных, отображаемых с помощью директивы v-for. Если это так, попробуйте использовать наблюдатель, например, так: 

{
    data() {
        return {
            id: undefined,
            image: undefined,
            locattion: undefined,
            country: undefined,
            tags: "Experiences",
            destinations: undefined
        }
    },
    created() {
        this.getData();
    },

    watch: {
        destinations: {
            deep: true, // this will make it observe deep changes
            // in objects this means it also fires when changes to its properties happen, not just when the object changes.
            // not 100% positive, but I'm pretty sure you get a similar effect with arrays and their contents
            handler: () => {
                $('.slickItem').not('.slick-initialized').slick({
                    infinite: true,
                    slidesToShow: 3,
                    arrows: false
                });
            }
        }
    },
    methods: {
        getData() {
            this.destinations = false;
            this.axios.get('/api/destinations/tags/' + this.tags).then((response) => {
                this.destinations = response.data;
                console.log(this.destinations);
            })
        },
        //Update ajax
        changeTag(tag) {
            $(".slickItem").slick("unslick");
            $('.slickItem').html('')
            this.tags = tag;
            this.getData();
        }
    }
}
...