diff --git a/packages/api-generator/src/locale/en/VTreeview.json b/packages/api-generator/src/locale/en/VTreeview.json index 0d1efb4f350..f140b2ae8c7 100644 --- a/packages/api-generator/src/locale/en/VTreeview.json +++ b/packages/api-generator/src/locale/en/VTreeview.json @@ -16,6 +16,7 @@ "itemText": "Property on supplied `items` that contains its label text.", "loadChildren": "A function used when dynamically loading children. If this prop is set, then the supplied function will be run if expanding an item that has a `item-children` property that is an empty array. Supports returning a Promise.", "loadingIcon": "Icon used when node is in a loading state.", + "modelValue": "Allows one to control which nodes are selected. The array contains the values of currently selected items. It is equivalent to the `v-model:selected`", "multipleActive": "When `true`, allows user to have multiple active nodes at the same time.", "offIcon": "Icon used when node is not selected. Only visible when `selectable` is `true`.", "onIcon": "Icon used when leaf node is selected or when a branch node is fully selected. Only visible when `selectable` is `true`.", diff --git a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx index 4515fbdbbe7..7908736a57a 100644 --- a/packages/vuetify/src/labs/VTreeview/VTreeview.tsx +++ b/packages/vuetify/src/labs/VTreeview/VTreeview.tsx @@ -37,6 +37,10 @@ export const makeVTreeviewProps = propsFactory({ expandIcon: '$treeviewExpand', slim: true, }), ['nav', 'openStrategy']), + modelValue: { + type: Array, + default: () => ([]), + }, }, 'VTreeview') export const VTreeview = genericComponent( @@ -53,6 +57,7 @@ export const VTreeview = genericComponent( 'update:opened': (val: unknown) => true, 'update:activated': (val: unknown) => true, 'update:selected': (val: unknown) => true, + 'update:modelValue': (val: unknown) => true, 'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true, 'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true, }, @@ -63,7 +68,16 @@ export const VTreeview = genericComponent( const baseColor = toRef(props, 'baseColor') const color = toRef(props, 'color') const activated = useProxiedModel(props, 'activated') - const selected = useProxiedModel(props, 'selected') + const model = useProxiedModel(props, 'modelValue') + const _selected = useProxiedModel(props, 'selected', props.modelValue) + + const selected = computed({ + get: () => _selected.value, + set (val) { + _selected.value = val + model.value = val + }, + }) const vListRef = ref()