Svelte如何根据下拉选择框的值实时更新出勤计数

要解决选择出勤选项后实时更新Present、Absent、Other、Online计数的问题，需要关联每个学生的出勤选择，并用Svelte的响应式特性自动统计数量，以下是修改后的完整实现：

完整代码 #

<script>
  // 模拟学生数据，给每个学生添加currentAttendance字段存储当前选择
  let studentsList = [
    {
      name: { first: 'John', last: 'Doe' },
      picture: { thumbnail: 'https://example.com/avatar1.jpg' },
      currentAttendance: 'present' // 默认出勤状态
    },
    {
      name: { first: 'Jane', last: 'Smith' },
      picture: { thumbnail: 'https://example.com/avatar2.jpg' },
      currentAttendance: 'absent'
    }
    // 更多学生数据...
  ];

  // 出勤选项配置，value对应计数分类
  let attendanceOptions = [
    { text: 'Present', value: 'present' },
    { text: 'Absent', value: 'absent' },
    { text: 'Other', value: 'other' },
    { text: 'Online', value: 'online' }
  ];

  // 响应式计算各状态计数，选择变化时自动更新
  $: presentCount = studentsList.filter(s => s.currentAttendance === 'present').length;
  $: absentCount = studentsList.filter(s => s.currentAttendance === 'absent').length;
  $: otherCount = studentsList.filter(s => s.currentAttendance === 'other').length;
  $: onlineCount = studentsList.filter(s => s.currentAttendance === 'online').length;
</script>

<form id="roles-form" action="#">
  <div class="student-count">
    <p>Present:{presentCount}</p>
    <p>Absent:{absentCount}</p>
    <p>Other:{otherCount}</p>
    <p>Online:{onlineCount}</p>
  </div>
  <table>
    <tr>
      <th>Photo</th>
      <th>Surname</th>
      <th>First Name</th>
      <th>Attendance</th>
      <th>Today's Attendance</th>
    </tr>
    <tbody id="role-table-body">
      {#each studentsList as student}
        <tr>
          <td><img src={student.picture.thumbnail} alt={student.name.first} style="width:50%;"></td> 
          <td>{student.name.last}</td> 
          <td>{student.name.first}</td>
          <td class="attendance-value">
            <div class="square green" title="Monday 15th of October">P</div>
            <div class="square red" title="Wednesday 19th of October">A</div>
            <div class="square green" title="Monday 25th of October">P</div>
            <div class="square green" title="Wednesday 30th of October">O</div>
            <div class="square red" title="Monday 5th of November">A</div>
          </td>
          <td>
            <div class="custom-select">
              <!-- 双向绑定学生的当前出勤状态，选择变化时自动更新 -->
              <select bind:value={student.currentAttendance}>
                {#each attendanceOptions as option}
                  <option value={option.value}>
                    {option.text}
                  </option>
                {/each}
              </select>        
              <span>&#10003;</span>
              <span>&#10540;</span>
            </div>
          </td>
        </tr>
      {/each}
    </tbody>
  </table>
</form>

关键修改点说明 #

1. 添加学生状态字段：在每个学生对象中新增currentAttendance，用于存储当前选择的出勤状态，可根据需求设置默认值。
2. 响应式计数统计：使用Svelte的$:声明派生状态，每次学生出勤状态变化时，自动重新过滤统计各分类的数量，无需手动增减计数。
3. 双向绑定选择框：通过bind:value={student.currentAttendance}将下拉选择框与学生状态绑定，选择变化时直接更新学生对象属性，触发计数自动更新。

若不想用双向绑定，也可通过on:change事件手动更新状态，替换select部分为：

<select on:change={(e) => student.currentAttendance = e.target.value}>
  {#each attendanceOptions as option}
    <option value={option.value} selected={student.currentAttendance === option.value}>
      {option.text}
    </option>
  {/each}
</select>

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