时间戳

首页 > 解决方案 > 可以设置 Polymer JS 输入值，但不会在 UI 中呈现

javascript - 可以设置 Polymer JS 输入值，但不会在 UI 中呈现

问题描述

我有两个名为LegalNameandOperatingName的字段（字段 1 和字段 2）。当向 id="legalName" 添加一个值时，eventlistener应该添加一个值，因此当我们focusout和选项卡到字段 2 时，字段 2 的值id="operatingName"默认为 LegalName 的值。现在这是在 Polymer 中，常规 JavaScript 事件侦听器不会看到/识别 id。然而，这就是我得到的，到目前为止，该值正在设置中，但是当我们聚焦时，它不会被渲染。任何帮助将不胜感激。

 _defaultToCompanyLegalName() {
                var el = this.$.legalName;
                if (el) {
                    this.$.commercial.addEventListener('focusout', function () {
                        this.$.operatingName.value = this.$.legalName.value;
                    })
                }
            }

id="commercial" 是父 DIV 的 id。

<div class="row" id="commercial">
            <div class="column mandatory">
                <div style="padding-right: 10px;">
                    <label for="companyLegalName">Company Legal Name</label>
                    <input id="legalName" type="text" value="{{_contract.companyLegalName::input}}" placeholder="Company Legal Name" />
                </div>
            </div>

            <div class="column">
                <div style="padding-right: 10px;">
                    <label for="companyOperatingName">Company Operating Name</label>
                    <input id="operatingName" type="text" value="{{_contract.companyOperatingName::input}}" placeholder="Company Operating Name" />
                </div>
            </div>
        </div>

标签： javascriptformsinputpolymerpolymer-2.x

解决方案

Eventlistener 被添加到 div "#contract" 上，但理想情况下它应该在输入字段 "#legalName" 上。我通过将 on-focusout 事件添加到“#legalname”输入并设置属性“_contract”的值成功解决了这个问题，这将设置输入字段“#operatingName”的值，因为它已经有两种方式绑定到它。

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="test-main">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>
        <div class="row" id="commercial">
            <div class="column mandatory">
                <div style="padding-right: 10px;">
                    <label for="companyLegalName">Company Legal Name</label>
                    <input id="legalName" type="text" on-focusout="_defaultToCompanyLegalName" value="{{_contract.companyLegalName::input}}" placeholder="Company Legal Name" />
                </div>
            </div>

            <div class="column">
                <div style="padding-right: 10px;">
                    <label for="companyOperatingName">Company Operating Name</label>
                    <input id="operatingName" type="text" value="{{_contract.companyOperatingName::input}}" placeholder="Company Operating Name" />
                </div>
            </div>
        </div>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class TestMain extends Polymer.Element {
      static get is() { return 'test-main'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'test-main'
          },
          _contract: {
            type: Object,
            value: {},
            notify: true
            
          },
        };
      } 
        _defaultToCompanyLegalName(e) {
            this.set("_contract.companyOperatingName",  this._contract.companyLegalName);
        }
        
        connectedCallback(){
            super.connectedCallback();
        }
    }

    window.customElements.define(TestMain.is, TestMain);
  </script>
</dom-module>

推荐阅读