Logic repeating because of shared _uid of child components

[frankmichel]

I noticed a problem in component logic of clusterized child components.

Assuming the child component looks like this:

example: 
{
    props: ['index'],

    template: '<div :style="(selected) ? 'background:red' : ''" v-on:click="selected=!selected">{{ index }}</div>',

    data: function()
    {
        return {
            selected: false
        }
    },
}

While the "index" property is properly set and displayed on clusterized components, it doesn't seem to be possible to keep logic within a unique child component because of the shared _uid's. So if you click on the component with the index of 1, you will see it will be repeated further down the list (in my case the component with an index of 60 has the same "selected" state... as well as 120, 180 and so on).

Applying a unique _uid to each component via track-by helps with the "selected" logic, but slows down the scrolling tremendously eliminating the advantages of vue-clusterize.

Is there any way to solve this?

[paulpflug]

something like this should work:

example: 
{
    props: ['index'],
    template: '<div :style="(selected==index) ? 'background:red' : ''" v-on:click="selected=index">{{ index }}</div>',
    data: function()
    {
        return {
            selected: -1
        }
    },
}

[frankmichel]

First of all: Thanks, Paul! For your quick reaction and for all your work for this great port of clusterize to vue.js!

Your suggestion works perfectly for boolean values. But how would you solve component data that cannot be compared against the index?

example: 
{
    template: '<div v-on:click="setStatus('active')">{{ status }}</div>',
    data: function()
    {
        return {
            status: 'inactive'
        }
    },
    methods:
    {
       setStatus: function(status)
       {
           this.status = status;
       }
    }
}

[paulpflug]

Thanks for your kind words :)

This won't work this way because your data lives in the parent scope, and
all rows share it. You always have to work with the index.

A possibility is to make a active array, where you store the index on
click (or remove it again on the next click).
to check if the row is active, you then look it's index up in that array.
This will be slow for many (+1000) simultaneously active rows.

Feel free to ask further if this doesn't work or doesn't solve your problem.

Am 9. September 2016 8:49:24 vorm. schrieb Frank Michel
notifications@github.com:

First of all: Thanks, Paul! For your quick reaction and for all your work
for this great port of clusterize to vue.js!

Your suggestion works perfectly for boolean values. But how would you solve
component data that cannot be compared against the index?

example:
{
    template: '<div v-on:click="setStatus('active')">{{ status }}</div>',
    data: function()
    {
        return {
            status: 'inactive'
        }
    },
    methods:
    {
       setStatus: function(status)
       {
           this.status = status;
       }
    }
}

You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
#11 (comment)

[frankmichel]

I am almost there...

I can store the status in an array (keyed by the clusterize index of the child component) on the parent and then send down the status via a property to the clusterized child.

<clusterized-child-component :status="getStatus(index)"></clusterized-child-component>

However, this only seems to work fine if the property is set beforehand on the parent array. Because my real application is even more complex (it's a grid with up to 30.000 child components) I cannot populate the status (and other more complex properties) beforehand.

I tried setting the status with Vue's Vue.set(...) or this.$set(...) but both don't trigger the re-evaluation of the getStatus() method if the property hasn't been set before.

I noticed that if I begin scrolling down and then back up again... it does get re-evaluated and the status will be shown correctly.

Do you have any idea on how to correctly invoke re-evaluation in order to update the prop on the child component?

I hope it's clear what I mean :)

EDIT:
Unfortunately this doesn't work either. Re-evaluating the getStatus() method on scroll is extremly slowing down the clusterize :(

[frankmichel]

OMG!! I just found the solution 💃

It DOES work with Vue.set. I did one crucial mistake by initializing a nested empty object without Vue.set before actually setting the property in a child object with Vue.set. So the parent object apparently hasn't been reactive...

So all you need to do is pass down the reactive data via props:

<clusterize :data="clusterData">
    <clusterized-child-component :status="data.status"></clusterized-child-component>
</clusterize>

I hope I am explaining it right because in my case the situation is a bit more complicated because of the grid...

Thanks again, Paul, for pushing me in the right direction and for your quick responses!

So the key is to keep the data properties out of the child component, change the properties on the parent data object and pass down the data via props.

[paulpflug]

That makes me happy 👍