Checkbox需点击两次触发onclick及dom-repeat复选框移除ArrayList元素问题

Hey Kevin, let's work through these two paper-checkbox issues you're facing—they're both common pitfalls when working with Polymer web components, so I’ll break them down with clear fixes:

This is almost always tied to using the wrong event type or conflicting with Polymer’s data binding lifecycle. Here’s what’s happening and how to fix it:

• Stop using on-click for paper-checkbox interactions: Paper-checkbox is a custom element that handles its own internal state changes first (like toggling the checked property). The click event might get swallowed or delayed by the element’s internal logic, leading to that "two clicks needed" behavior. Instead, use the on-change event—it’s designed specifically to fire when the checkbox’s checked state changes, which aligns perfectly with what you’re trying to trigger.
• Check for binding conflicts: Your checked="{{item.checked}}" is a two-way binding. If your click event relies on the updated checked value, the first click might trigger before Polymer has finished updating the property, making it seem like the event didn’t fire. Switching to on-change ensures the event runs after the state is updated.

Example fix for the event binding:

<paper-checkbox checked="{{item.checked}}" on-change="handleCheckboxChange"></paper-checkbox>

Looking at your code, there are a few key issues causing the unexpected behavior—let’s fix them step by step:

First, fix the event handler name #

You’re using on-click="click" which is a bad idea: click is a native DOM method, and naming your function the same will cause conflicts. Rename it to something descriptive like handleCheckboxRemove:

<paper-checkbox checked="{{item.checked}}" on-click="handleCheckboxRemove"></paper-checkbox>

Second, use Polymer’s array methods to modify your list #

When working with Polymer’s dom-repeat, you can’t just use vanilla Array.splice() to remove items—Polymer needs to track array changes to update the UI. Instead, use Polymer’s built-in splice() method for your array property. Also, make sure you’re correctly accessing the item tied to the clicked checkbox using the event.model object (this is how dom-repeat passes the context of the rendered item):

handleCheckboxRemove(event) {
  // Get the specific item from the dom-repeat model
  const targetItem = event.model.item;
  // Find its index in the gerechten array
  const itemIndex = this.gerechten.indexOf(targetItem);

  if (itemIndex !== -1) {
    // Use Polymer's splice method to remove the item and trigger UI updates
    this.splice('gerechten', itemIndex, 1);
  }
}

Third, double-check your dom-repeat configuration #

You’re using both items="{{gerechten}}" and count="[[num_box]]". If num_box doesn’t match the length of gerechten, you’ll end up rendering items that don’t exist in your array—clicking these will throw errors because there’s no corresponding item to remove. Unless you specifically need to limit the number of rendered items, remove the count attribute entirely; dom-repeat will automatically render all items in gerechten.

Quick debugging tip #

Add console.log(targetItem, this.gerechten) inside your handler to confirm you’re grabbing the correct item and that your array is structured as expected. This will help catch any edge cases where items aren’t being tracked properly.

内容的提问来源于stack exchange，提问作者Kevin Kentie