从 Javascript object 写入和读取数据

Question

I have the following small setup in Svelte:

Calendar and checkboxes work. What I am trying to understand is the best way to read and store the option responses for each date that is selected by the user.

Here is what I currently have in my svelte file:

<script>
    import Datepicker from "praecox-datepicker";
    import { onMount } from 'svelte';

    export let name;

    let day;
    let questions = [
            {value: "Condition 1", checked: false},
            {value: "Condition 2", checked: false},
            {value: "Condition 3", checked: false},
            {value: "Condition 4", checked: false}
        ];
    let selectedQuestions = [];

    $:  questions = {...questions,
        [day]: [
            {value: "Condition 1", checked: false},
            {value: "Condition 2", checked: false},
            {value: "Condition 3", checked: false},
            {value: "Condition 4", checked: false},
    ]
    };


    $: {
        selectedQuestions = questions.savedValues[day]
};

    $: selectedQuestions = Object.fromEntries(Object.entries(questions).filter(([key, value]) => key == day))

    $: day = day;
    $: readDate = new Date(day);
    $: mm = readDate.toLocaleString("en-US", {month: "long"});
    $: dd = readDate.toLocaleString("en-US", {day: "numeric"});
    $: yyyy = readDate.toLocaleString("en-US", {year: "numeric"});

    onMount(async () => {
        day = new Date()
    });
</script>

<main>
        <div class="row">
            <div class="col-sm">
                <Datepicker pickerRule='singleChoice' bind:pickerResult={day}/>
            </div>
            <div class="col-sm">
                <p>{mm} {dd}, {yyyy}</p>
            <ul>
                {#each questions as question}
                <li>
                    <input type=checkbox checked={question.checked}>
                    {question.value}
                </li>
                {/each}

            </ul>
            </div>
</main>

The current issue is I'm not sure how to access the filtered object and if I'm even accessing that properly.

To recap the workflow would need to handle the following:

1. User loads page, options are presented and default to false.
2. User selects options for first date, these are saved, and user moves to new day.
3. New list of checkboxes are presented, all default to false. User updates options and these are saved.
4. User revisits item and updates previously input information.

Answer 1

You need:

1.Upgrade praecox-datepicker to version 1.0 or higher.

2.Use bind:selected to get the selected result.

3.Pass the selection result (start date) to the viewDate property to keep the view synchronized.

4.If you want a timely response, please submit an issue directly on Github.

REPL

See more.