☰

Svelte 3 で条件付き属性を設定するにはどうすればいいですか? 質問する

tag-icon • tag-icon html svelte svelte-3 svelte-component
Svelte 3 で条件付き属性を設定するにはどうすればいいですか? 質問する

次のチェックボックス コンポーネントを記述するより簡単な方法はありますか。

<script>
  export let disabled = false;
</script>

{#if disabled}
  <label class="checkbox" disabled>
    <input type="checkbox" {disabled} />
    <slot></slot>
  </label>
{:else}
  <label class="checkbox">
    <input type="checkbox" {disabled} />
    <slot></slot>
  </label>
{/if}

<label disabled="false">Bulma には CSS クラスがあるため、これは受け入れられません.checkbox[disabled]。

ベストアンサー1

disabled || null(またはdisabled || undefined) でも大丈夫です:

<label class="checkbox" disabled={disabled || null}>
  <input type="checkbox" {disabled} />
  <slot></slot>
</label>

からドキュメント:

... [A]属性は、その値が無効（nullまたはundefined）。

<input required={false} placeholder="This input field is not required">
<div title={null}>This div has no title attribute</div>

おすすめ記事