Polymer, vaadin-combo-box; Get value of input

Question

I'm trying to get the value of a vaadin-combo-box input, but it returns [object Object]. I cannot find out how to get the actual value of the input, and my form will contain about three. Please tell me what am I doing wrong in reading vaading-combo-box's value.

Here is my code:

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<link rel="import" href="../bower_components/vaadin-combo-box/vaadin-combo-box.html">



<link rel="import" href="shared-styles.html">

<dom-module id="my-view2">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }
    </style>

    <div class="card">
<iron-ajax
    id="ajax"
    url="http://localhost/data.php"
    params=''
    handle-as="text"
    on-response="hresponse"
    debounce-duration="300"></iron-ajax>

<paper-input label="Name" id="thename" name="thename"></paper-input>
<iron-ajax url="https://api.myjson.com/bins/1b0f7h" last-response="{{response}}" auto></iron-ajax>
     <vaadin-combo-box name="fromm" id="fromm" items="[[response]]" item-value-path="fromm" label="fromm" item-label-path="countryName">
       <template>
           <paper-item-body two-line>
             <div>[[item.countryName]]</div>
           </paper-item-body>
       </template>
     </vaadin-combo-box>

 <button on-click="setajax">Click me</button>


  </div>
  </template>


  <script>
      Polymer({
          is: "my-view2",
          setajax: function () {
            alert(this.$.thename.value);

      //    alert(this.$.fromm.value); not working - returns Object object



          //   this.$.ajax.params = {thename:this.$.thename.value, fromm:this.$.fromm.value};
          //   this.$.ajax.generateRequest();
          },
          hresponse: function(request) {
              console.log(request.detail.response);
              console.log(this.$.ajax.lastResponse);
          }
      });
  </script>
</dom-module>

I can alert Name's value with alert(this.$.thename.value), but when I'm trying to do the same thing to from's value alert(this.$.fromm.value) it always returns [object Object].

Answer 1

Your item-value-path="fromm" in vaadin-combo-box is referencing the combo box whose value is response object. That is why it is showing you [object Object].

Change the value of item-value-path to what you want to display.

For example if your object is like

response:[{name:"stackoverflow", countryName:"Australia"}]

put item-value-path="countryName" if you want to display the value of countryName.