时间戳

首页 > 解决方案 > 从 Javascript 对象写入和读取数据

javascript - 从 Javascript 对象写入和读取数据

问题描述

我在 Svelte 中有以下小型设置：

日历和复选框

日历和复选框工作。我想了解的是读取和存储用户选择的每个日期的选项响应的最佳方式。

这是我目前在我的 svelte 文件中的内容：

<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>

当前的问题是我不确定如何访问过滤后的对象，以及我是否正确地访问它。

回顾工作流程需要处理以下内容：

  1. 用户加载页面，显示选项并默认为 false。
  2. 用户选择第一个日期的选项，这些选项被保存，用户移动到新的一天。
  3. 出现新的复选框列表，默认为 false。用户更新选项和这些被保存。
  4. 用户重新访问项目并更新先前输入的信息。

标签： javascriptjqueryjsonsvelte

解决方案

你需要：

1.升级praecox-datepicker到1.0或更高版本。

2.bind:selected用于获取选中的结果。

3.将选择结果（开始日期）传递给viewDate属性以保持视图同步。

4.如需及时回复，请直接在Github上提交issue。

REPL

看更多。

推荐阅读