输入值绑定在循环中不起作用

Question

我试图通过创建可重复使用的输入字段来压缩我的代码。所以我声明了一个对象数组来循环并创建字段。乍一看这很好用。我的问题是变量 videoSearch 始终未定义。该函数被调用，但不是我输入的值。我没有看到绑定的某个方面吗？这是我的代码：

  let values = {
    song: "",
    video: null,
    tab: null
  };

  let videoSearch;
  let tabSearch;
  let videos;

  const inputs = [
    {
      label: "Song",
      value: values.song
    },
    {
      label: "Search Youtube",
      value: videoSearch,
      func: debounce(searchYoutube, 300)
    },
    {
      label: "Search Songsterr",
      value: tabSearch,
      func: debounce(searchYoutube, 300)
    }
  ];

 async function searchYoutube() {
    console.log(videoSearch);
    if (videoSearch && videoSearch.length > 3) {
      // ... do ApiCall
    }
  }

    {#each inputs as { value, label, func }}
      <div class="input-container">
        <input on:input={func} bind:value />
        <label class={value ? 'flying-label' : ''}>{label}</label>
      </div>
    {/each}

编辑

我为它创建了一个REPL。

Answer 1

您的问题是您正在用输入的值覆盖 value，删除对 videoSearch 的引用。通过向 videoSearch 函数添加一些日志记录，您可以轻松地看到这一点：

async function searchYoutube() {
   console.log(inputs[1]);
   ...
}

如果你想使用这个构造，我会在输入数组中引入一个 getter/setter 而不是直接引用 videoSearch 字段，这将阻止你的绑定不被覆盖。

  const inputs = [
    {
      label: "Search Youtube",
      get value() { return videoSearch; },
      set value(val) { videoSearch = val; },
      func: searchYoutube
   }
];

输入值绑定在循环中不起作用

input value binding does not work in loop

svelte

svelte-3