时间戳

首页 > 解决方案 > Svelte：手风琴选择器的数据绑定

typescript - Svelte：手风琴选择器的数据绑定

问题描述

我正在围绕 Svelte (JS) 制作一个医学调查用途的应用程序。我的数据是关于{类别、测试、子测试}

我需要使用手风琴子测试选择器来提供简历条目。

由于体积，设计选择是合并类别和测试级别。用户选择一个类别+测试，手风琴显示可以选择的子测试..

我对 Svelte 的双向数据绑定不太熟悉。我试过这个，但导致类型错误：'ctx.selected'未定义。

<section>
  <h1>Pick subtests you need in accordion list</h1>

  <div class="accordion">
    {#each cats_tests as ct, ctidx }
      <div class="wrapper">
        <h2 class="ct-heading">
         <label>
           <input bind:group='selected' value={ ctidx }  type=checkbox />
           <span>{ ctidx }: { ct.name }</span>
         </label>
        </h2>
        {#if selected[ctidx] }
          {#each ct.subtests as sub, subidx }
            <div transition:fade>
              <h3 class="subtest-heading">
                <label for="ct-{ctidx}-sub-{subidx}">
                  <input  id="ct-{ctidx}-sub-{subidx}" type="checkbox" />
                  <span>{ subidx }: { sub.name }</span>
                </label>
              </h3>
            </div>
          {/each}
       {/if}
      </div>
    {/each}
  </div>
</section>

<script>
  import { fade } from 'svelte-transitions'

  export default {
    transitions: { fade},

    oncreate() {

    },

    data() {
      return {
        cats_tests: [
          {
            name: 'Cat A - Test 1',
            subtests: [
              { name: 'subtest-s'},
              { name: 'subtest-t'},
              { name: 'subtest-u'}
            ]
          }, {
            name: 'Cat A - Test 2',
              subtests: [
          { name: 'subtest-v'},
          { name: 'subtest-w'},
          { name: 'subtest-x'} ,
          { name: 'subtest-y'}
        ]
          }, {
            name: 'Cat B - Test 3',
            subtests: [
              { name: 'subtest-z'}
            ]
         }
       ]
     }
    }
  }
</script>

<style>
  h2.ct-heading {
    background-color: #d1e1f1;
  }

  h3.subtest-heading {
    padding-left: 15%;
  }

</style>

问题 ：

  1. 如何解决？
  2. 如何在不查询服务器的情况下检索应用程序其他部分中挑选的子测试？考虑我正在使用 svelte-routing 插件和商店

感谢您的回答。

标签： typescriptcomponentsaccordionsvelte

解决方案

基本上：

一个错误（丢失）添加selected: [] 到数据部分，当然......

并检测选择了哪个航向：

{#if selected.indexOf(ctidx) > -1 }
  {#each ct.subtests as sub, subidx }
    <div transition:fade>
      // ...
    </div>
   {/each}
 {/if}

这对我有用！

推荐阅读