多路径对象数组变更需求：点击触发sortData对象属性修改

Got it, let's walk through how to fix this. You're trying to update a specific path in your sortData object when clicking an <iron-icon>, and need the UI to react to those changes properly. Here's a solid approach tailored to Polymer's data binding system:

Step 1: Adjust the Template for Reusable Click Handling #

First, update your <iron-icon> to pass the target field via a data-* attribute (this makes the function work for multiple fields without rewriting code) and bind the click to your _changeSortData function:

<iron-icon 
  id="id" 
  icon="icons:arrow-downward" 
  on-click="_changeSortData" 
  data-field="id"
  class$="arrow [[sortData.id.icon]] [[sortData.id.state]]"
></iron-icon>

The data-field="id" lets us grab which field we're targeting directly from the click event, avoiding hardcoded values in the function.

Step 2: Implement the _changeSortData Function #

Polymer relies on this.set() to detect changes in nested objects (direct assignment won't trigger UI updates). Here's how to write the function to toggle the sort state and update the sortData path correctly:

_changeSortData(e) {
  // Get the target field from the clicked element
  const field = e.currentTarget.dataset.field;
  
  // Initialize default state if the field doesn't exist in sortData yet
  if (!this.sortData[field]) {
    this.set(`sortData.${field}`, {
      order: 'asc',
      icon: 'icons:arrow-downward',
      state: 'inactive'
    });
  }
  
  // Get current state to toggle
  const current = this.sortData[field];
  
  // Toggle sort order, icon, and state
  const newOrder = current.order === 'asc' ? 'desc' : 'asc';
  const newIcon = newOrder === 'asc' ? 'icons:arrow-downward' : 'icons:arrow-upward';
  const newState = current.state === 'active' ? 'inactive' : 'active';
  
  // Update the nested properties using Polymer's set method
  this.set(`sortData.${field}.order`, newOrder);
  this.set(`sortData.${field}.icon`, newIcon);
  this.set(`sortData.${field}.state`, newState);
  
  // Optional: If you only want one active sort field at a time, reset others
  // Object.keys(this.sortData).forEach(key => {
  //   if (key !== field) {
  //     this.set(`sortData.${key}.state`, 'inactive');
  //   }
  // });
}

Step 3: Initialize sortData Properly #

Make sure your sortData object is initialized in your element's properties so it has default values to work with:

static get properties() {
  return {
    sortData: {
      type: Object,
      value() {
        return {
          id: {
            order: 'asc',
            icon: 'icons:arrow-downward',
            state: 'inactive'
          }
          // Add other sortable fields here as needed
        };
      }
    }
  };
}

Key Notes: #

• Always use this.set() for nested paths: This tells Polymer's reactivity system that the data has changed, so it updates the UI bindings (like your class$ attributes).
• Reusable logic: Using data-field means you can add more <iron-icon> elements for other fields (e.g., data-field="name") and they'll all work with the same _changeSortData function.
• Toggle behavior: The example toggles between ascending/descending order and swaps icons/states, but you can adjust this logic to match your exact requirements (e.g., fixed order cycles, custom icon names).

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