child component
parent
src - https://techinplanet.com/two-way-prop-data-binding-using-sync-in-vue-js-components/
JavaScript:
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="auto"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
:value="value"
:label="caption"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<!-- https://gist.github.com/wpsmith/7604842 -->
<v-date-picker
:value="value"
@input="menu = false;$emit('update:value', $event)"
locale="el"
></v-date-picker>
</v-menu>
<script>
export default {
props: {
caption: String,
value : String
},
parent
JavaScript:
<vdatepickerex
caption="Profile date"
v-model="item.profileDate"
:value.sync="item.profileDate"
/>
Avoid mutating a prop directly
JavaScript:
//when using v-model
v-model="value"
//is equivalent to
:value="value" @input="value= $event"
src - https://techinplanet.com/two-way-prop-data-binding-using-sync-in-vue-js-components/