use of .sync

Costas

Administrator
Staff member
child component
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/
 
Top