ujjwalguptaofficial/mahal

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

ujjwalguptaofficial opened this issue · 1 comments

ujjwalguptaofficial commented

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 commented

fixed in v - 1.5.1