如果使用 dom-repeat 在纸张对话框上选中复选框，如何显示值

Question

如果使用 dom-repeat.In 控制台在纸张对话框中选中复选框，如何显示值，它正在打印为数组。我想要在纸质对话中使用相同的内容。有什么建议么？我已经为检查文本完成了单绑定和双绑定，但它只显示多个复选框勾选的一个值。

Polymer({
  is: 'check-list',
  properties: {
    checkdata: {
      type: Array,
      value: [{
        name: 'Bike',
        checked: false
      }, {
        name: 'Car',
        checked: false
      }, {
        name: 'Cycle',
        checked: false
      }, {
        name: 'Bus',
        checked: false
      }, {
        name: 'Truck',
        checked: false
      }],
    },
  },
  checkall: function() {
    var checkvalue = this.checkdata;
    var checktext = [];
    for (i = 0; i < checkvalue.length; i++) {
      if (checkvalue[i].checked == true) {
        checktext.push(checkvalue[i].name);
        this.checkeditem = checktext;
      }
    }
    console.log(checktext);
  }
});

<base href="https://polygit.org/polymer+polymer+v1.11.2/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-checkbox/paper-checkbox.html" />

<check-list></check-list>

<dom-module id="check-list">
  <template>
    <template is="dom-repeat" items="{{checkdata}}">
      <paper-checkbox on-tap="checkall" checked="{{item.checked}}">{{item.name}}</paper-checkbox>
    </template>
  </template>
</dom-module>

Answer 1

如果我理解问题是 checkeditem 没有正确更新？我认为这是因为您将它放在我们的 for 循环中。如果你把它移到外面应该没问题。

Polymer({
  is: 'check-list',
  properties: {
    checkdata: {
      type: Array,
      value: [{
        name: 'Bike',
        checked: false
      }, {
        name: 'Car',
        checked: false
      }, {
        name: 'Cycle',
        checked: false
      }, {
        name: 'Bus',
        checked: false
      }, {
        name: 'Truck',
        checked: false
      }],
    },
  },
  checkall: function() {
    var checkvalue = this.checkdata;
    var checktext = [];
    for (i = 0; i < checkvalue.length; i++) {
      if (checkvalue[i].checked == true) {
        checktext.push(checkvalue[i].name);
      }
    }
    this.checkeditem = checktext;
  }
});

<base href="https://polygit.org/polymer+polymer+v1.11.2/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-checkbox/paper-checkbox.html" />

<check-list></check-list>

<dom-module id="check-list">
  <template>
    <template is="dom-repeat" items="{{checkdata}}">
      <paper-checkbox on-tap="checkall" checked="{{item.checked}}">{{item.name}}</paper-checkbox>
    </template>
  <ul>
    <template is="dom-repeat" items="{{checkeditem}}">
        <li>{{item}}</li>
      </template>
  </ul>
  </template>
</dom-module>

另外，当我在这里时，你可以将你的 checkall 功能简化为这个

checkall: function() {
  let checktext = [];
  for (let checkvalue of this.checkdata) {
    checkvalue.checked && checktext.push(checkvalue.name);
  }
  this.checkeditem = checktext;
}

希望你觉得这个有用

如果使用 dom-repeat 在纸张对话框上选中复选框，如何显示值

How to display values if checkbox is checked on paper-dialog using dom-repeat

html

javascript

polymer