Create 'view' mode
Learn how to create a view mode for forms.
We can write a plugin, that disables all elements when view-mode
is turned on:
js
// vueform.config.js
import { defineConfig } from '@vueform/vueform'
import { watch, computed } from 'vue'
const viewModePlugin = () => ([
// Add `viewMode` prop to Vueform
{
apply: 'Vueform',
props: {
viewMode: {
required: false,
default: false,
type: Boolean,
}
}
},
// Disable all elements when `viewMode: true`
{
apply: /^[A-Za-z]+Element$/,
setup(props, context, component) {
const { form$, disable, enable } = component
// The element can't be disabled
if (typeof disable === 'undefined') {
return component
}
// Disable element if viewMode is turned on
if (form$.value.viewMode) {
disable()
}
// Disable / enable element as viewMode changes
watch(computed(() => form$.value.viewMode), (viewMode) => {
viewMode ? disable() : enable()
})
return component
}
}
])
export default defineConfig({
plugins: [
viewModePlugin,
]
})
After that we can use it by adding view-mode
to <Vueform>
component:
vue
<Vueform view-mode />