Svelte on navigation，如何保持输入值？

Question

这里的问题是，当我在输入中输入值时，默认值会重新设置到我的输入中。我想在更新我的路由查询参数时保留它们。我想从变量中剥离值并将它们赋值回去，但是，这是一个坏主意，因为在反应式的字符串中，值只有 return。

<script>
  let facetFilters = [
        `collections:${slug}`
    ]
    let priceFilter
    let priceLeft = 0;
    let priceRight = 5000;
    $: prices = [priceLeft, priceRight]
    $: {
       /**
        * Seperate the facets in to different arrays. If facet has multiple values each value is added to the same array item
        * All values of a facet are seperated by a comma like so vendor=Bikkel,Merida -> url output: ?vendor=bikkel%2Cmerida
        * The price will be fitered out of the facet filters array
        * */
        
            let params = [...$page.url.searchParams.entries()]
            console.log(params)
            let price = params.filter(([key]) => key == 'price')
            .map(([key, values]) => values.split(',').map((value) => `${key}:${value}`));
            
            /* Convert price that is currently in an array to string */
            priceFilter = price.toString() /* when the url is like this '?price=1200+TO+2400' the output will be: price:1200 TO 2400 */
            
            let result = params.filter(([key]) => key !== 'price')
            .map(([key, values]) => values.split(',').map((value) => `${key}:${value}`));

            facetFilters =  [facetFilters, ...result] 
            
            
           
  }
  async function search(key, value) {
        
        let query = new URLSearchParams($page.url.searchParams.toString())
        
        if(key == 'price') {
            let val = value.join(" TO ")
            query.set(key, val)
        } else {
            console.log(value)
            query.set(key, value.split(","))
        }
        
        return goto(`?${query.toString()}`);
    }
</script>

<div>
   <span>&euro;</span>
   <input type="text" placeholder="0" bind:value={priceLeft}/>
   <span>tot</span>
   <input type="text" placeholder="5000" bind:value={priceRight}/>
   <button type="button" on:click={ () => search('price', [priceLeft, priceRight])}>
       update
   </button>
</div>

Answer 1

我假设如果用户是第一次导航，您想要计算价格，然后保留用户输入的内容。如果是这种情况，您可以尝试将您的值写入商店，然后，在您的反应块中，您 return 商店中有什么，如果有的话，或者 return 您的计算。

Svelte on navigation，如何保持输入值？

Svelte on navigation, how to keep input values?

javascript

svelte

sveltekit