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

Gh05d 发表于 Dev

Gh05d

我试图通过创建可重用的输入字段来压缩我的代码。所以我声明了一个对象数组来循环并创建字段。乍一看，这很好用。我的问题是变量 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。

斯蒂芬·万瑞斯

您的问题是您正在用输入的值覆盖值，删除对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
   }
];

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。