根据 Select 绑定，文本 bind:value 不工作

Question

我需要输入从 selected 选项中得到的值。如果我 select 东京，我需要通过 bind:value 输入代码 1850147（东京城市代码）。但是我的代码不是那样工作的。帮我解决这个问题..

<script>
  
  let cities = [
    {
      CityCode: "1248991",
      CityName: "Colombo",
      Temp: "33.0",
      Status: "Clouds",
    },
    {
      CityCode: "1850147",
      CityName: "Tokyo",
      Temp: "8.6",
      Status: "Clear",
    },
    {
      CityCode: "2644210",
      CityName: "Liverpool",
      Temp: "16.5",
      Status: "Rain",
    },
    {
      CityCode: "2988507",
      CityName: "Paris",
      Temp: "22.4",
      Status: "Clear",
    },
    {
      CityCode: "2147714",
      CityName: "Sydney",
      Temp: "27.3",
      Status: "Rain",
    },
    {
      CityCode: "4930956",
      CityName: "Boston",
      Temp: "4.2",
      Status: "Mist",
    },
    {
      CityCode: "1796236",
      CityName: "Shanghai",
      Temp: "10.1",
      Status: "Clouds",
    },
    {
      CityCode: "3143244",
      CityName: "Oslo",
      Temp: "-3.9",
      Status: "Clear",
    },
  ];

  let selected;

  function handleSubmit() {
    alert(
      `Chosen city ${selected.CityCode}`
    );

  }

</script>

<h2>Choose City from here</h2>

<form on:submit|preventDefault={handleSubmit}>
  <select bind:value={selected}>
    {#each cities as city}
      <option value={city}>
        {city.CityName}
      </option>
    {/each}
  </select>

  <button type="submit"> Submit </button>

  
</form>

<input type="text" bind:value={selected.CityCode}>

当我 select 一个选项并点击提交按钮时，它在警报中正确显示，但输入类型没有根据我之前 select 编辑的内容进行更改...有什么问题我的代码？

Answer 1

我不太清楚你想要完成什么，因为在两个不同的地方绑定一个值会变得很难处理。绑定意味着双向更新。您绑定到 selected，这是一个变量（太棒了！），但是您还绑定到 selected.CityCode，这不是一个变量。如果你只想传递值，你可以这样做

<input type="text" value={selected.CityCode}>

如果您仍然希望输入被绑定，您可以在提交时传递值，如下所示：

<script>
  let cities = [
    {
      CityCode: "1248991",
      CityName: "Colombo",
      Temp: "33.0",
      Status: "Clouds",
    },
    {
      CityCode: "1850147",
      CityName: "Tokyo",
      Temp: "8.6",
      Status: "Clear",
    },
    {
      CityCode: "2644210",
      CityName: "Liverpool",
      Temp: "16.5",
      Status: "Rain",
    },
    {
      CityCode: "2988507",
      CityName: "Paris",
      Temp: "22.4",
      Status: "Clear",
    },
    {
      CityCode: "2147714",
      CityName: "Sydney",
      Temp: "27.3",
      Status: "Rain",
    },
    {
      CityCode: "4930956",
      CityName: "Boston",
      Temp: "4.2",
      Status: "Mist",
    },
    {
      CityCode: "1796236",
      CityName: "Shanghai",
      Temp: "10.1",
      Status: "Clouds",
    },
    {
      CityCode: "3143244",
      CityName: "Oslo",
      Temp: "-3.9",
      Status: "Clear",
    },
  ];

  let selected;
  let input;

  function handleSubmit() {
    alert(`Chosen city ${selected.CityCode}`);
    input = selected.CityCode;
  }
</script>

<h2>Choose City from here</h2>

<form on:submit|preventDefault={handleSubmit}>
  <select bind:value={selected}>
    {#each cities as city}
      <option value={city}>
        {city.CityName}
      </option>
    {/each}
  </select>

  <button type="submit"> Submit </button>

  
</form>

<input type="text" bind:value={input}>

根据 Select 绑定，文本 bind:value 不工作

Text bind:value is not working according to Select bindings

data-binding

svelte