Summary

Support built-in v-model binding for the native <details> element and <dialog> element.

Links

• Full Rendered Proposal
• RFC: Built-in v-model on <details> and <dialog> #496
• Implementation PR: feat: support v-model for <details> and <dialog> core#8048

Summary

Support built-in v-model binding for the native <details> element and <dialog> element.

Basic example

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

<template>
  <details v-model="show">
    <summary>Summary</summary>
    <span>Details</span>
  </details>

  <dialog v-model="show">
    <form method="dialog">
      <button>OK</button>
    </form>
  </dialog>
</template>

When toggling the <details> or <dialog> element, the value of show should be reflected. Or once show has been modified, the details should expand/collapse automatically.

Motivation

Currently we support v-model built-in on input, textarea, select, which is convenient to bind the value to them. However, when it comes to <details> and <dialog>, v-model will throw and users would need to bind manually. Which could be a bit counterintuitive.

Since <details> and <dialog> are native elements, it makes sense to have built-in support for them.

For now, users would need to manually bind them as:

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

<template>
  <details :open="show" @toggle="show = $event.target.open">
    <summary>Summary</summary>
    <span>Details</span>
  </details>

  <dialog :open="show" @close="show = false">
    <form method="dialog">
      <button>OK</button>
    </form>
  </dialog>
</template>

• Playground Before
• Playground After

Detailed design

This is should be a compiler improvement, to be able to transform v-model on the <details> and <dialog> elements with open and @toggle.

Drawbacks

It might theoretically conflict if users managed to implement a nodeTransformer on the user land to support v-model on <details> or <dialog>. But we are not aware of any existing library doing this.

Alternatives

N/A

Adoption strategy

This is a new feature and should not affect the existing code.

Unresolved questions

N/A