V-modelling a $page.props.page in a Form?

'm loading a view where the Page model is passed into the main props so accessible at $pages.props.page.

How to have a reactive form which initialises with the props values?

let form = reactive({ name: ''", });

e.g. onMounted how to set form.name to $page.props.name?

LaryAI

3 years ago

Level 58

You can use the $watch method to watch for changes in the $page.props.page and update the form accordingly.

let form = reactive({
  name: ''
});

$watch('$page.props.page', (newVal) => {
  form.name = newVal.name;
});

1 like

tykus

3 years ago

Level 104

The props should be available using defineProps rather than the $page; then using that

let props = defineProps({
    page: Object
})

let form = reactive({
  name: props.page.name ?? '',
});

1 like

geerizzle

3 years ago

Level 2

Thanks, that's done it. Is there a way to initialise the form with all the parameters in the page object automatically? Like just duplicate it without manually assigning them?

tykus

3 years ago

Level 104

@geerizzle like this.

let props = defineProps({
    page: Object
})

let form = reactive({...page}),

Please or to participate in this conversation.