聚合物,vaadin-combo-box;获得输入的价值

时间:2017-09-12 23:41:38

标签: javascript json polymer vaadin

我试图获取vaadin-combo-box输入的值,但它返回[object Object]。我无法找到如何获得输入的实际值,我的表单将包含大约三个。请告诉我在阅读vaading-combo-box的价值时我做错了什么。

这是我的代码:

<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>

我可以使用alert(this.$.thename.value)提醒姓名的价值,但是当我尝试从值alert(this.$.fromm.value)做同样的事情时,它总会返回{{1} }}

1 个答案:

答案 0 :(得分:2)

item-value-path="fromm"中的vaadin-combo-box引用了值为response对象的组合框。这就是为什么它会向您显示[object Object]

item-value-path的值更改为您要显示的内容。

例如,如果你的对象是

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

如果要显示countryName的值,请输入item-value-path="countryName"