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

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

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

如果要使用此构造，我将在input数组中引入一个getter / setter，而不是直接引用 videoSearch 字段，这样可以防止绑定被覆盖。

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

输入值绑定无法循环使用

1 个答案: