当底层数据结构变化时，如何更新Select下拉选项文本？

问题根源 #

你遇到的下拉选项文本未更新的问题，核心原因有两点：

1. SelectionOption未实现PartialEq：Leptos的<For>组件依赖元素的相等性判断来决定是否更新DOM。由于你的结构体仅派生了Debug/Clone/Copy，没有PartialEq，<For>无法检测到元素内部amount字段的变化，会复用旧的DOM节点，导致文本不更新。
2. 选中状态属性错误：代码里使用了default_selection属性，这是用于设置初始选中状态的静态属性，无法动态响应信号变化，应该使用selected属性。

修复步骤 #

1. 给SelectionOption添加PartialEq派生 #

让Leptos能检测到元素内部状态的变化：

#[derive(Debug, Clone, Copy, PartialEq)]
pub struct SelectionOption {
    pub label: &'static str,
    pub id: u32,
    pub amount: u32,
}

2. 修正<option>的选中状态属性 #

将default_selection改为selected，确保选中状态能随信号动态更新：

<option
  value = option.id
  selected = (default_selection.get() == Some(option.id))
>
  { format!("{} - {}", option.label, option.amount) }
</option>

完整修复后的代码 #

#[component]
pub fn DynSelector() -> impl IntoView {
    #[derive(Debug, Clone, Copy, PartialEq)]
    pub struct SelectionOption {
        pub label: &'static str,
        pub id: u32,
        pub amount: u32,
    }

    let selectionOptions1: Vec<SelectionOption> = vec![
        SelectionOption{ label: "h0rses", id: 0, amount: 0},
        SelectionOption{ label: "b1rds", id: 1, amount: 10},
        SelectionOption{ label: "2nfish", id: 2, amount: 0},
        SelectionOption{ label: "3lk", id: 3, amount: 20},
    ];

    let default_selection: RwSignal<Option<u32>> = create_rw_signal(Some(0));
    let selectionOptions = create_rw_signal::<Vec<SelectionOption>>(selectionOptions1);

    let print = move |_| {
        let s = selectionOptions.get();
        info!("{} {}", s[0].label, s[0].amount);
    };

    let add_option = move |_| {
        let a = SelectionOption{ label: "4eel", id: 4, amount: 20};
        selectionOptions.update(|n| {
            n[0].amount = 200;
            n.push(a);
            info!("n[0]: {} {}", n[0].label, n[0].amount)
        });
    };

    view! {
      <div style="background:#eae3ff">
        <select
          id = "mymultiselect"
          on:change = move |ev| {
            let target_value = event_target_value(&ev);
            if target_value.is_empty() {
              default_selection.set(None);
            } else {
               match target_value.parse() {
                 Ok(v) => {
                   info!("you selected {}", v);
                   default_selection.set(Some(v))
                 },
                 Err(_) => {
                   error!("Error: Unexpected option value {target_value}");
                 },
              }
            }
          }
        >
          <For
            each = move || selectionOptions.get()
            key = |option| option.id
            let:option
          >
            <option
              value = option.id
              selected = (default_selection.get() == Some(option.id))
            > { format!("{} - {}", option.label, option.amount) } </option>
          </For>
        </select>
        <p>
          "You selected: "
          <span data-testid="mymultiselection">{move || {
            let selected_option = default_selection.get();
            match selected_option {
                Some(v) => {
                    let opts = selectionOptions.get();
                    let opt = &opts[v as usize];
                    format!("{} - {}", opt.label, opt.amount)
                },
                None => "no idea...".to_string()
            }
          }}</span>
          <button on:click=add_option> "Add another option to selector" </button>
          <button on:click=print> "Print" </button>
        </p>
      </div>
    }
}

验证效果 #

点击"Add another option to selector"按钮后：

• 第一个选项的文本会从h0rses - 0更新为h0rses - 200
• 新选项4eel - 20会正常显示
• 选中状态和下方的选中提示文本也会正常更新

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