diff --git a/active-rfcs/0000-v-model-details-dialog.md b/active-rfcs/0000-v-model-details-dialog.md new file mode 100644 index 00000000..84632ea2 --- /dev/null +++ b/active-rfcs/0000-v-model-details-dialog.md @@ -0,0 +1,85 @@ +- Start Date: 2023-04-07 +- Target Major Version: 3.x +- Reference Issues: (fill in existing related issues, if any) +- Implementation PR: https://github.com/vuejs/core/pull/8048 + +# Summary + +Support built-in `v-model` binding for the native [`
` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog). + +# Basic example + +```html + + + +``` + +When toggling the `
` or `` 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 `
` and ``, `v-model` will throw and users would need to bind manually. Which could be a bit counterintuitive. + +Since `
` and `` are native elements, it makes sense to have built-in support for them. + +For now, users would need to manually bind them as: + +```html + + + +``` + +- [Playground Before](https://play.vuejs.org/#eNp9Us1qg0AQfpXtUkgLiUJbKAQjFnrroYf2uBejo7Fxf9gdE4r47p1VY0wCPS0z8/05Y8vfjAkODfA1j1xmK4PMATYmFqqSRltkLbNQsI4VVku2IOhCKKEyrRxBd/rINh7wUKS1g0ehonCQIQEqEKSpUwSqGIu2DaJWLMnqKttvBB/pd/4VvMcw9q3LsoY1a1vf7rqeGQ7UHtI3csC0qh1bawNqlBKcJdizz9r3cACFAaa2BAw8eDKKXCNlan/jr+Gl5GPjNDepit8HIxr6aggzms/SVGmty5swWa3dLEu/orN9oa1kEnCnc8IMEtN02lb8+XHx9d7fM09RehoVUTjtmi/5cLuVTE3w47Si67Z92HHgBKcFD3KC0019LfgO0bh1GDbK7Msg0zJMaBbaRmElYZVrmTwHT8HLK9k6nPcDcHK1tfrowJKj4MuZeEjNA9iVBZWDBfuv2RX2wvBqdmPqPel/6Xj3B2p5994=) +- [Playground After](https://deploy-preview-8048--vue-sfc-playground.netlify.app/#eNp1UL1OwzAQfpXDS2GA7JUbgcTGwACjF5NcUgvbZ9lOEYry7vVPGrVDp9N335/PM3tz7uU0IdszHjqvXISAcXKtsMo48hFm8DjAAoMnA7sk3QkrbEc2JOmR/uCQBY+D1AGfhOVNjUkBCUQ0TsuICQHwnylGsvDaadX9HgRb7Q95ClY0AN80jhr3MM95vSzF2VRrkZRFj1EqHeD0bKhHvYZtITxMxkj/337VmV61Li68k7Z9ryGJzKgWrcFXTUpqGu8WDeQNGIxH6hNXxRu73dx+ftzckJuy81JabAnwZvsxtpwBN2KL3g==) + +# Detailed design + +This is should be a compiler improvement, to be able to transform `v-model` on the `
` and `` 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 `
` or ``. 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