I am trying to bind values to a Each Value:
For example:
JS:
let test = ""
let headers = [
{
title: "test",
connected: test,
}
]
const setPage = () => {
console.log(test);
};
HTML:
{#each headers as header}
<input
type="text"
placeholder={header.title}
bind:value={header.connected}
on:change={() => setPage(1)}
/>
{/each}
The Header Title works as expected but the binding does not work. Is there any way that i can use it like this?
In the beginning the start value will be set to the value of test - since it's an empty string in your case, that can't be seen.
After the value of the input is changed the reactive log shows that the value of header.connected changes accordingly.
So the binding basically does work. Not sure if you expected test to change as well? How should everything then behave if there was more than one header object?
<script>
let test = ""
let headers = [
{
title: "header1",
connected: test,
},
{
title: "header2",
connected: test,
}
]
function updateTest(event) {
test = event.target.value
}
$: console.log('headers', headers)
</script>
<p>
test: {test}
</p>
{#each headers as header}
<input
type="text"
placeholder={header.title}
bind:value={header.connected}
on:input={updateTest}
/>
{/each}