OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Why this Svelte 5 condition object isn't working for this list?

  • Thread starter Thread starter Fred Hors
  • Start date Start date
F

Fred Hors

Guest
In this reproduction I'm trying to understand if it's possible and if this is the idiomatic way to create a condition filter for a list merging variables from parents too...

But it doesn't work.

As you can see, when you open the project the condition is empty {}.

Instead I need it to be:

Code:
{
  "or": [
    {
      "withPlayer": {
        "name": "testMe"
      }
    }
  ]
}

Is there a way?

App.svelte:

Code:
<script>
    import List from "./List.svelte";
</script>

<List searchText={"testMe"} />

List.svelte:

Code:
<script>
    let {
        pagination = { current: 1, size: 5 },
        condition = {},
        searchText
    } = $props();
    
    const facade = {
        get searchText() {
            return searchText
        },
        set searchText(value) {
            searchText = value;

            condition.or = (condition.or || []).filter((item) => !item.withPlayer);

            if (value) {
                condition.or.push({ withPlayer: { name: value } });
            }
        }
    }
</script>

<input type="text" bind:value={facade.searchText} />

<br><br>

condition: <pre>{JSON.stringify(condition, null, 2)}</pre>

<p>In <a href="https://svelte-5-preview.vercel.app...De7J76o6bJhnYqe8z-JjOxU4q357fw_wPYqN3bCMDAAA=" rel="nofollow noreferrer">this reproduction</a> I'm trying to understand if it's possible and if this is the idiomatic way to create a condition filter for a list merging variables from parents too...</p>
<p>But it doesn't work.</p>
<p>As you can see, when you open the project the condition is empty <code>{}</code>.</p>
<p>Instead I need it to be:</p>
<pre class="lang-json prettyprint-override"><code>{
"or": [
{
"withPlayer": {
"name": "testMe"
}
}
]
}
</code></pre>
<p>Is there a way?</p>
<p>App.svelte:</p>
<pre class="lang-html prettyprint-override"><code><script>
import List from "./List.svelte";
</script>

<List searchText={"testMe"} />
</code></pre>
<p>List.svelte:</p>
<pre class="lang-html prettyprint-override"><code><script>
let {
pagination = { current: 1, size: 5 },
condition = {},
searchText
} = $props();

const facade = {
get searchText() {
return searchText
},
set searchText(value) {
searchText = value;

condition.or = (condition.or || []).filter((item) => !item.withPlayer);

if (value) {
condition.or.push({ withPlayer: { name: value } });
}
}
}
</script>

<input type="text" bind:value={facade.searchText} />

<br><br>

condition: <pre>{JSON.stringify(condition, null, 2)}</pre>
</code></pre>
 
Top