2

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

masbrojo
  • 83
  • 1
  • 1
  • 10
  • Why are you using `$this` and not `this`? and who do you expect `$this.$.comp` to be? – mishu May 28 '19 at 07:57
  • u rite, i just edit my code, hope more clear to understand – masbrojo May 28 '19 at 08:08
  • Have you checked examples from here? Under [Allow custom Values](https://vaadin.com/components/vaadin-combo-box/html-examples) Maybe you could try the `customElements.whenDefined('vaadin-combo-box').then(function() {` block – anasmi May 28 '19 at 08:27
  • And what about `this.$.comp`? What is the component? – anasmi May 28 '19 at 08:28
  • @masbrojo a little more context would have helped.. I guess that by this.$.comp you are trying to get that div by ID.. note that this doesn't work for elements that are conditionally rendered (if it's part of an if, for example).. so you can try to replace `this.$.comp` with `this.shadowRoot.getElementById('comp')` to see if it's any different – mishu May 28 '19 at 08:52
  • @masbrojo and aside from that, a different problem you might have would be with `document.querySelector`.. if you are in shadowDom context you need to query in your shadowRoot, not on a document level.. – mishu May 28 '19 at 08:53
  • yup, my first step is to make querySelector, i change to Polymer.dom(this.root).querySelector('vaadin-combo-box'); and it work's :) .. now i need, to extract 'selected value' and store it into input text – masbrojo May 28 '19 at 09:11

1 Answers1

1

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

anasmi
  • 2,562
  • 1
  • 13
  • 25