elixir - 实时取景重新加载后消失的选择

Question

我的 LiveView 渲染中出现了一个奇怪的问题。以下是作为流程发生的情况：

1. 我从第一个选择中选择任何非默认选项，将第二个选择保留为默认 -> 我将搜索表单提交到 LiveView -> 在重新加载的带有新条目的屏幕上，我再次为第一个选择选择默认选项，将第二个选择保留为默认 -> 我提交我的搜索表单到 LiveView -> 第二个选择消失
2. 我从第二个选择中选择任何非默认选项，将第一个选择保留为默认 -> 我将我的搜索表单提交到 LiveView -> 在重新加载的带有新条目的屏幕上，我再次选择第二个选择的默认选项，将第一个选择保留为默认 -> 我提交我的搜索表单到 LiveView -> 首先选择消失
3. 我从两个选择中选择任何非默认选项 -> 我将我的搜索表单提交到 LiveView -> 我清除向 LiveView 提交clear事件的字段 -> 我将我的搜索表单与第一个和第二个选择的默认值提交到 LiveView -> 两个选择都消失了

通过说消失，我的意思是消失 - 在 chrome 开发人员工具中的元素中，选择器应该在的地方只是空的。

我认为问题是在为字段分配值时引起的，这是我生成选择的代码：

<div class="form-group col-md-3 main-search__form-group">
  <%= label f, :rent_type, gettext("Type"), class: "main-search__form-label" %>
    <%= select f, :rent_type, [[key: "", value: ""]] ++ @rent_types,
      class: "form-control main-search__form-input main-search__form-input--select",
      value: @form_vals.rent_type %>
    <%= error_tag_live f, :rent_type, @changeset %>
  </div>

  <div class="form-group col-md-3 main-search__form-group">
    <%= label f, :rooms_number_min, gettext("Rooms") %>
    <%= select f, :rooms_number_min, 
      [
        [key: "1+", value: "1"],
        [key: "2+", value: "2"],
        [key: "3+", value: "3"],
        [key: "4+", value: "4"],
        [key: "5+", value: "5"]
      ], value: @form_vals.rooms_number_min,
      class: "form-control main-search__form-input main-search__form-input--select" %>
    <%= error_tag_live f, :rooms_number_min, @changeset %>
  </div>
</div>

@form_vals是来自先前请求的值，这些值是为表单加载以保持其状态的。我确定它们通过了，但我不确定它们是否具有良好的格式。进入 LiveView 的参数格式：

%{
  ... some other params ...
  "rent_max" => "",
  "rent_min" => "",
  "rent_type" => "2",
  "rooms_number_min" => "1",
  "square_area_max" => "",
  "square_area_min" => ""
  ... some other params ...
}

离开 LiveView 的参数格式为form_vals：

%{
  ... some other params ...
  rent_max: "",
  rent_min: "",
  rent_type: "2",
  rooms_number_min: "1",
  square_area_max: "",
  square_area_min: ""
  ... some other params ...
}

向 LiveView发送clear事件时，我只需使用明确的字段值进行响应：

%{
  ... many other fields ...
  rent_type: "",
  rooms_number_min: "1",
  ... many other fields ...
}

如果有人知道为什么我的选择器消失了，我会非常感激让我知道。我真的被困住了，不知道我该怎么办。

标签： elixirphoenix-frameworkphoenix-live-view