установить метку vaadin-combo-box и правильно указать значение в полимере - PullRequest
2 голосов
/ 28 мая 2019

Я пытаюсь реализовать этот пример это в полимер, так как мне нужно отобразить метки на входе.

я только что попробовал

  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>

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 );         
        });
        }

в выпадающем списке addEventListener есть ошибка Uncaught TypeError: Cannot read property 'addEventListener' of null, но ошибка из queryselector

обновление 1. : querySelector успешно с Polymer.dom (this.root) .querySelector

обновление 2. : до сих пор не понятно, почему combobox.nilai «не определено»

обновление3. : работает combobox.selectedItem.nilai ^^ спасибо, спасибо всем ... теперь мне просто нужно ввести значение

1 Ответ

1 голос
/ 28 мая 2019

Расположен ли hmtl, упомянутый выше, под <template>? Другими словами, вы создаете Shadow DOM?

Если это так, по document.querySelector('vaadin-combo-box'); вы ищете комбобокс в «легком» DOM и, очевидно, там нет комбобокса, поэтому возвращается null. Следовательно, ошибка выдается, когда вы пытаетесь добавить список в null

Но в противном случае, что такое компонент с идентификатором comp? Вам нужно будет получить доступ к вашему списку тем же способом.

Здесь обсуждаются похожие темы:

Кроме того, могут быть полезны примеры из официальной документации: Обработка и запуск событий

...