0

I replaced one of my input field for a custom lookup component. I can get the value of it and add it to a variable. The problem I have is I need to push it to an Array and I cannot get the name of the component as this is not a property like the Input-Field. See below HTML:

<td scope="col"> <!--COMPONENT--> <c-lwc-lookup object-api-name="product2" icon-name="standard:product" onrecordselection={changeHandler}> </c-lwc-lookup> </td> <td scope="col"> <!--InputField--> <lightning-input value={field.Description__c} data-index={index} access-key={index} type='text' name="fieldDescription" onchange={changeHandler}> </lightning-input> </td> 

My component is a lookup on the object Product2. and once I select the product, I am calling the changeHandler function where I need to get the accesskey and add the value to my Array. Unfortunately, it is not working like the Input Field... Here is my changeHandler

changeHandler(event){ var index = event.target.dataset.index; //This is the component part that is not working //event.target.name is not working because the component doesn't have that attribute if(event.target.name==='product2'){ //event.target.accessKey is not working neither but I can add it to the component but still not working this.contentArray[event.target.accessKey].Name = event.detail.selectedValue; } //This is the Input-Field and works as a charm. else if(event.target.name==='fieldDescription'){ this.contentArray[event.target.accessKey].Description = event.target.value; } } 

If I had only one line it will work by just using a variable but I have multiple lines... Thanks!

1 Answer 1

0

You didn't give it a name, so it wouldn't have a name. Conceptually, you could give it a name:

<c-lwc-lookup name="product2" ... 

You'd probably have to modify c-lwc-lookup to have an @api attribute to make this work.

You can choose to not modify the component, and still access its' public property object-api-name if you wanted to:

if(event.target.objectApiName === 'product2') { 

Or, you could add a data attribute, as in:

<c-lwc-lookup data-name='product2' ... 

Then:

if(event.target.dataset.name === 'product2') { 

Other options are possible as well. You just need to coordinate how you want it to work.

4
  • Yes, I tried your first example yesterday before posting here and had no luck as I guess name= is not supported with my component and probably need to add it like you are saying to the @api attribute, I am too rookie to think about that but I'll remember for next time ;) I used data-name instead and it works like a charm! Where can I find a list of all attributes? I search, I Google it and found some peaces but not that one... Your help is always appreciated! ;) Commented Mar 27, 2021 at 14:38
  • @Eric All attributes for what, exactly? Your component has whatever attributes you define with @api. For standard components, check the documentation. Commented Mar 27, 2021 at 15:11
  • Example: data-name=, object-api-name=, data-index=, access-key=, value=. I guess some of them are default by component like name= for input Fields and some can be custom when you create your component. Is data-name= custom? Sorry for my rookie question Commented Mar 27, 2021 at 15:35
  • @Eric any attribute that is @api can be used, such as name or access-key, these vary by component (again, check the docs). The data-* attributes are used to attach private use data from your own component to keep track of which element is which (like which element in an iterator was referenced). The component never needs to declare @api variables for data-* attributes. Commented Mar 27, 2021 at 18:28

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.