0

I have below code where i have an array which i am iterating and displaying an input field of date type in readOnly like below

enter image description here

Upon clicking of the edit icon i am trying to make the field editable. The issue which i am facing is if i click the edit icon all the rows becomes editable like below

enter image description here

I want only that row should become editable for which the icon is clicked. How to achieve that using data index

Below is the link to playground

https://webcomponents.dev/edit/tMFxV3wI7POZIcRr9AJq/src/app.js?p=stories

1
  • any other solution for this issue ? Jan 19, 2022 at 15:53

3 Answers 3

1

You need to have a property for each value to make just one editable. I've updated your sample code.

array = [];

connectedCallback(){
    this.array = [...Array(10).keys()].map(key => ({ key, readOnly: true, value: null }))
}
toggleDueDate(e){
    this.array[e.target.dataset.index].readOnly = false
    this.array = [...this.array]
}
1
0

The simplest way is Component Communication After the for:each tag make the code in a child component

In this way each date field is a component so only the one you clicked will be made editable

0

your code should be...

app.HTML.

<template>

    <template for:each={array} for:item="item" for:index="index">       
            
        <c-child key={item.Id} index={index}></c-child>
            
    </template>

</template>

app.js

import { LightningElement } from 'lwc';
export default class App extends LightningElement {

    
    array = [];

    connectedCallback(){
        for(var i = 0; i< 10; i++){
            this.array.push(i)
        }
    }
    
}

child.html

<template>

    <article data-index={index} key={item.Id}>
            <div class="slds-tile__detail">
                <dl class="slds-list_horizontal slds-wrap">
                    <dt class="slds-item_label slds-text-color_weak slds- 
                      truncate" title={item.Industry}>
                        Due Date:</dt>
                    <dd class="slds-item_detail" title="Description for 
                        second label">
                        <div class="slds-grid">
                            <div class="slds-col">
                                <div class="slds-col">
                                    <template if:true={readOnly}>
                                        2018-07-22
                                    </template>
                                    <template if:false={readOnly}>
                                        <lightning-input class="duedate" 
                                    type="date" value="2018-07-22" 
                                        label="duedate"
                                            variant="label-hidden">
                                        </lightning-input>
                                    </template>
                                </div>
                            </div>
                            <div class="slds-col">
                                <lightning-icon icon-name="utility:edit" 
                            data-index={index} size="xx-small" onclick= 
                                   {toggleDueDate}>
                                </lightning-icon>
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        </article>

</template>

child.js

import { LightningElement, api } from "lwc";


export default class Child extends LightningElement {
  
    @api label = "";
    @api index;
    createOpp = 'yes';
    readOnly = true;

    toggleDueDate(e){
        console.log(e.target.dataset.index);
        this.readOnly = false;
    }
}
1
  • hi durai .. is this the only solution ?.. why i am asking is i have constraint a new child component. .. Jan 19, 2022 at 14:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .