Problem with updating :class #1699

paletas · 2021-06-30T23:05:09Z

paletas
Jun 30, 2021

So this one is kinda hard for me to explain, but I do have an example, but when I have an array that I'm using x-for on and I want to highlight the "current" value so I use :class to make that happen. Now whenever the current changes, the array gets updated with new items (I'm using this to create a pagination component), it starts highlighting what seems to be random elements, but upon closer inspection it seems that :class updates after changing the current, but not when the x-for updates.

Now, depending on the order (this I found out while making the example) this either works well or not at all.

<html>
    <head>
        <title>Sample</title>
        <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
        <!--<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>-->
        <style>
            .extra-bold { font-weight: 800; font-size: larger; }
        </style>
    </head>
    <body>
        <div x-data="iterator()">
            <template x-for="i in display">
                <div>
                    <a href="#" :class="{'extra-bold': currIx === i }" @click="setCurrent(i)" x-text="i"></a>
                </div>
            </template>
            <button @click="setCurrent(currIx + 1)">Increment</button>
            <button @click="setCurrent(currIx - 1)">Decrement</button>
            <div>
                Current Index: 
                <span x-text="currIx"></span>
            </div>
        </div>
        <script type="text/javascript">
            function iterator() {
             
                return { 
                    ix: 0, 
                    currIx: 1, 
                    display: [1,2,3,4,5],
                    setCurrent: function(curr) {
                        this.currIx = curr;
                        this.display = [curr - 2, curr - 1, curr, curr + 1, curr + 2];
                    }
                };
            }
        </script>
    </body>
</html>

So the example above replicates the problem, if you increment or decrement it will highlight seemingly random items. But if we change the order of the code in the setCurrent function, it works fine.

Note: my code worked in v2, only noticed the problem after upgrading, and so does the example.

Answered by danddanddand

Jul 1, 2021

I’m not sure I understand your intent, but you need :key and I’d move display into a pure function just to simplify state (it’s just a calculation based on currIx so in this example it makes more sense but not sure your intent exactly). https://codepen.io/danddanddand/pen/JjNoQZY

View full answer

danddanddand · 2021-07-01T04:13:56Z

danddanddand
Jul 1, 2021

I’m not sure I understand your intent, but you need :key and I’d move display into a pure function just to simplify state (it’s just a calculation based on currIx so in this example it makes more sense but not sure your intent exactly). https://codepen.io/danddanddand/pen/JjNoQZY

3 replies

paletas Jul 1, 2021
Author

My intent is a pagination component, one that worked on v2 stopped working on v3, I like your approach and can see it works but I still believe this shows a bug within the framework. One that's caused by updating the current index before the display array, doing the same actions in a different order will make everything work flawlessly.

danddanddand Jul 1, 2021

It’s not a bug because without key you should expect inconsistent rendering as it can get mixed up trying to diff each node. My example just added key. I moved array into function so first render made more sense. You can read through x-for code and comments and see what it’s doing https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-for.js

I’m still learning but x-for is borrowed/influenced by Vue so if you Google articles about key and v-for should find better explanations than I can give.

paletas Jul 1, 2021
Author

You're right the :key does fix the issue, and I was sure it was a mistake made while trying to repro the problem, turns out the v2 wasn't bothered by it missing, even though I was sure I added it on my component.

Thanks for the help!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Problem with updating :class #1699

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Problem with updating :class #1699

Uh oh!

paletas Jun 30, 2021

Replies: 1 comment · 3 replies

Uh oh!

danddanddand Jul 1, 2021

Uh oh!

paletas Jul 1, 2021 Author

Uh oh!

danddanddand Jul 1, 2021

Uh oh!

paletas Jul 1, 2021 Author

paletas
Jun 30, 2021

Replies: 1 comment 3 replies

danddanddand
Jul 1, 2021

paletas Jul 1, 2021
Author

paletas Jul 1, 2021
Author