CODEWITHSUNDEEP
javascriptpolymervaadin
masbrojo
masbrojo

Reputation: 83

set vaadin-combo-box label and value properly in polymer

i try to implements this example this into polymer since i need to display label's into input.

i just tried

  1. html :
    <div id='comp' class="item">
        <form id="formC">   
 <div class="item-label edit">
   <iron-ajax url="/url" last-response="{{resp}}" auto></iron-ajax>

   <vaadin-combo-box id="Box" name="Box" selected-item="{{label}}" 
   placeholder="Please select" items="[[resp]]" item-value-path="label" 
   item-label-path="label" value$='[[data.label]]' name='label' > 
   </vaadin-combo-box>
 </div>                                                                
 <div class="item-valu edit">
      <input size="8" name="valu" value$='[[data.valu]]'>
 </div>
        </form>             
    </div>
  1. script
        ready(){
            const combobox = Polymer.dom(this.root).querySelector('vaadin-combo- 
     box');
            combobox.items = [
    {label: 'One', nilai: 1},
    {label: 'Two', nilai: 2},
    {label: 'Three', nilai: 3}
  ];
        combobox.addEventListener('selected-item-changed', function() {
         alert("selected-item-change" + JSON.stringify(combobox.selectedItem));
        });
         combobox.addEventListener('value-changed', function() {
         alert("value-change" + combobox.nilai );         
        });
        }

on combobox addEventListener there's an error Uncaught TypeError: Cannot read property 'addEventListener' of null but the error is from queryselector

update 1. : querySelector success with Polymer.dom(this.root).querySelector

update 2. : still not understood why combobox.nilai 'undifined'

update 3. : it works combobox.selectedItem.nilai ^^ thx god, thx everyone .. now i just need to inject the value

Upvotes: 2

Views: 586

Answers (1)

anasmi
anasmi

Reputation: 2652

Does hmtl mentioned above located under a<template>? In other words, are you creating a Shadow DOM?

If so, by document.querySelector('vaadin-combo-box'); you are looking for combobox in the "light" DOM and apparently there is no combobox there, so null is returned. Consequentially, the error is thrown, when you try to add a listner to null

But otherwise, what is a component with the comp id? You would need to access your combobox in the same way.

There are discussions on similar topic here:

Also, examples from official documentation might be helpful : Handle and fire events

Upvotes: 1

Related Questions