On gists

v-model (ukazky implementaci)

Vue.js

App.vue Raw #

<template>
  <div id="app">
    Data z rodiče: {{ msg }}
    <hr />
    <Formik v-model="msg" />
  </div>
</template>

<script>
import Formik from './components/Formik.vue';

export default {
  name: 'App',
  components: {
    Formik,
  },
  data() {
    return {
      msg: 'pica2',
    };
  },
};
</script>

Formik.vue Raw #

<template>
  <!-- 1 zpusob -->
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
  <!-- 2 zpusob -->
  <input v-model="inputak" />

  <br />Data z child {{ modelValue }}

  <Formik2 v-model="inputak" />
</template>

<script>
import Formik2 from './Formik2.vue';

export default {
  name: 'Formik',
  components: {
    Formik2,
  },
  props: ['modelValue'],
  data() {
    return {};
  },
  computed: {
    inputak: {
      get() {
        return this.modelValue;
      },
      set() {
        this.$emit('update:modelValue', event.target.value);
      },
      /*
      nebo
      set(value) {
        this.$emit('update:modelValue', value);
      }
      */
      
    },
  },
};
</script>

Formik2.vue Raw #

<!-- 3 moznost pres watch -->
<template>
  <input v-model="internalValue" />
</template>

<script>
export default {
  name: 'Formik',
  props: ['value'],
  data() {
    return {
      internalValue: this.value
    };
  },
  watch: {
    value(newValue) {
      this.internalValue = newValue;
    },
    internalValue(newInternalValue) {
      this.$emit('update:value', newInternalValue);
    }
  }
};
</script