Title

Show directive does not work in case of for loop with object as item

Description

consider this code -

---
name: faq.mahal
description:
dateCreated: September 26, 2022
---

<html>
<div>
    <div class="title">
        Frequently asked questions
    </div>
    <div>
        <div :for(item,index in list) class="mt-2">
            <b @click="showFAQ(index)" class="is-flex is-justify-content-space-between is-cursor-pointer">
                <div>{{item.question}}</div>
                <i class="fa fa-chevron-down"></i>
            </b>
            <div :show(item.show) :html(item.answer)></div>
        </div>
    </div>
</div>
</html>

<script>
import { Component } from "mahal";

export default class extends Component {
    list = [
        {
            question: "What is NFT ?",
            answer: "NFT stands for non fungible tokens. It represents digital record of different art on blockchain. <br><br> The people who buys NFT's - they own the digital record of that art. People buy NFT due to multiple reasons - showcase (as there is only one NFT in whole world), investment , support the artist etc .",
        },

    ];

    showFAQ(index) {
        this.list[index] = {
            ...this.list[index],
            show: true,
        } as any;
    }
}
</script>

<style scoped>
</style>

The issue is mostly because prop for the directive is empty and thus no reactiveness. Here is how the directive data looks like -

'{"value":[null],"props":[],"params":[null],"isComponent":false}'

ujjwalguptaofficial / mahal

Show directive does not work in case of for loop with object as item #7

Title

Description