Vue.Isotope
Vue.Isotope copied to clipboard
Published
20 hours ago •
David-Desmaisons
David-Desmaisons
how can I solve a problem of display of the component “vue-isotope” on “NuxtJS”
trafficstars
I use vue-isotope with Nuxt JS in a component. The data from my loop inside the vue-isotope component is computed by asyncData provided in my root page.
My problem appears when I reload the page "F5", the container built by isotope has no height and the display is not good (see image below), I think find my solution by triggering a trigger in jquery to regenerate the isotope component. But I would like to have your opinion because there may be something that I did not understand well and maybe you could offer me another alternative.
When I use a "nuxt-link" the display is perfect, why this difference ?
A code snippet below:
<isotope
v-if="data.length > 0"
ref="cpt"
id="root_isotope1"
:item-selector="'element-item'"
:list="data"
:options='option'
@filter="filterOption=arguments[0]"
>
<div
v-for="(value, index) in data"
:key="index"
:class='[value.type.slug]'
class="masonry-item col-lg-6 col-md-6 col-sm-6 m-b30"
>
... some code
</div>
</isotope>
... some code
computed: {
...mapState({
data: state => state.accommodations.list
... some code
bug display
normal display
Check this: https://github.com/David-Desmaisons/Vue.ImagesLoaded#isotope-example
thank you for your answer ultra fast, I admit that we surpass my skills a bit in javascript, then I show you my code?
<template>
<div class="list-grid section-full p-tb90">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<BlockQuote :params="getParams"/>
</div>
</div>
</div>
<div class="container">
<div class="filter-wrap p-tb50">
<ul id="isotope_menu_default" class="masonry-filter link-style text-uppercase">
<li class="show-all button"
ref="isotope_init_button"
:class="['show-all'===filterOption? 'is-checked' : '']"
@click="filter('filterByText', 'show-all')"
>
<a href="javascript:void(0);" >All</a>
</li>
<li v-for="(value, index) in types"
class="button"
:class="[index===filterOption? 'is-checked' : '']"
@click="filter('filterByText', value.slug)">
<a href="javascript:void(0);">{{ value.name }}</a>
</li>
</ul>
</div>
<div class="form-group">
<input name="username" type="text" required="" class="form-control" placeholder="Name">
</div>
</div>
<div class="portfolio-wrap mfp-gallery news-grid clearfix">
<div class="container-fluid">
<div class="row">
<!-- <no-ssr> -->
<isotope ref="isotope_list_default"
v-images-loaded:on.progress="layout"
:item-selector="'element-item'"
:list="data"
:options='option'
@filter="filterOption=arguments[0]">
<div
v-for="(value, index) in data"
:key="index"
:class='[value.type.slug]'
class="masonry-item col-lg-6 col-md-6 col-sm-6 m-b30">
<div class="wt-img-effect gradi-black">
<img :src="imagePath(value.primaryImage.filename)" alt="">
<div v-if="value.label" class="listing-badges">
<span class="featured letter-spacing-4 font-12 text-uppercase p-lr20"> {{ value.label.name }} </span>
</div>
<div class="box box-details">
<div class="right">
<span class="place"><i class="fa fa-map-marker" ></i> {{ value.place.name }}</span>
</div>
<div class="left">
<div>
<span class="amount">{{ toCurrencyString(value.price) }}</span>
<span class="priceType" v-if="value.rentalPriceType">{{ value.rentalPriceType.name }}</span>
</div>
</div>
</div>
<div class="overlay-bx-2">
<div class="line-amiation p-a40">
<div class="wt-post-info text-white">
<div class="wt-post-title">
<h3 class="post-title">
<a href="javascript:void(0);" class="text-white font-20 letter-spacing-4 text-uppercase">
{{ value.type.name }} <span class="areaSize">{{ value.areaSize }} M2</span>
</a>
</h3>
</div>
<div class="wt-post-meta">
<!-- <ul>
<li class="post-date"><strong>20 Feb</strong> <span> 2018</span> </li>
<li class="post-author"><a href="javascript:void(0);">By <span>Admin</span></a> </li>
</ul> -->
</div>
<div class="wt-post-text">
<p v-if="value.description">{{ value.description | truncate(110) }}</p>
</div>
<nuxt-link
class="v-button letter-spacing-4 font-12 text-uppercase p-l20"
:to="getLocalizedRoute({
name: params.routeName
, params: {
category: $tradLinkSlug($store.state.i18n.currentLocale, value.type.slug, 'accommodationType')
, slug: $tradLinkSlug($store.state.i18n.currentLocale, value.slug, 'accommodation')
}
})">
{{ $t('plus d\'infos') }}
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
</isotope>
<!-- </no-ssr> -->
</div>
</div>
</div>
</div>
</template>
<script>
if (process.client) {
require('~/plugins/vue-isotope.js')
var imagesLoaded = require('~/plugins/vue-images-loaded.js')
}
import { mapState } from 'vuex'
import BlockQuote from '~/components/BlockQuote'
export default {
name: 'AccommodationsListGridNews',
props: {
params: {
type: Object
}
},
directives: {
imagesLoaded
},
components: {
BlockQuote
},
data () {
return {
currentLayout: 'masonry',
selected: null,
sortOption: "original-order",
filterOption: "show-all",
filterText: "show-all",
option: {
itemSelector: ".element-item",
getFilterData: {
filterByText: (itemElem) => {
if('show-all' == this.filterText) {
return true
}
return itemElem.type.slug.includes(this.filterText.toLowerCase());
}
}
}
}
},
computed: {
...mapState({
data: state => state.accommodations.list,
types: state => state.accommodation_types.list
}),
getParams() {
return { filename: this.getImageForBlockquote() }
}
},
mounted () {
},
updated () {
console.log('updated')
},
methods: {
filter: function(key, val) {
this.filterText = val
this.$refs.isotope_list_default.filter(key)// composant externe
},
toCurrencyString(number){
return number.toLocaleString('fr-FR', { style: 'currency', currency: 'EUR' })
},
imagePath: function (filename) {
return process.env.FORMAT_MEDIA_PATH + 'grid' + process.env.DEFAULT_MEDIA_PATH + filename
},
getImageForBlockquote() {
let element = _.head(_.shuffle(this.data))
if(!element.primaryImage) {
return null
}
return element.primaryImage.filename
},
layout () {
console.log('ici')
this.$refs.isotope_list_default.layout('masonry');
}
}
}
</script>
no one to help me? Is there an example of a code that works? (when we use the refresh of course)
