2

How to pass data between two components in a web component?

I can't pass the selectedIndex from the parent select to the child component (converter-input) And then show the desired array according to selectedIndex...

index.html

...
    <div>
        <form name="property_form">
            <span>
                <select class="select-property form-control" name="the_menu">
                </select>
            </span>
        </form>
    </div> 
    <div>
        <div class="converter-side-a">
            <converter-input></converter-input>
        </div>

        <div class="converter-equals">
            <p>=</p>
        </div>

        <div class="onverter-side-b">
            <converter-input></converter-input>
        </div>
    </div> 
...

index.js

...
 if(mainForm){
     mainForm.addEventListener('change' , () =>{
         let i = mainForm.selectedIndex;
         selectUnit(i);
         
     })
 }

function selectUnit(i){
    selsectedConverterArr = mainOb[i].unit;
    console.log(selsectedConverterArr);
}
...
fatemeh garshasbi
  • 21
  • 2
  • https://www.dntips.ir/post/3188/html5-web-component-%d9%82%d8%b3%d9%85%d8%aa-%d8%af%d9%88%d9%85-custom-elements – A.R.SEIF Aug 31 '22 at 10:28
  • Please add an executable StackOverflow Snippet to your post. It will help readers execute your code with one click. And help create answers with one click. See [How to add a StackOverflow snippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) – Danny '365CSI' Engelman Aug 31 '22 at 13:58

0 Answers0