Is there a way to simplify this code?

The button should also change the localValue of the child.

Vueponent('my-input', {
  template: `
    <div>
      <b>My Input:</b> <br>
      localValue: {{ localValue }} <br>
      <input v-model="localValue">
    </div>
  `,
  props: ['value'],
  data() {
    return { localValue: this.value }
  },
  watch: {
    value () {
      this.localValue = this.value
    },
    localValue () {
      this.$emit('input', this.localValue)
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    parentValue: 'Inital value'
  }),
  methods: {
    change () {
      this.parentValue = 'Changed value'
    }
  }
})

<script src=".5.3/vue.min.js"></script>
<div id="app">
  <my-input v-model="parentValue"></my-input>

  <button @click="change">Change</button><br>

  parentValue: {{ parentValue }}
</div>

Is there a way to simplify this code?

The button should also change the localValue of the child.

Vue.ponent('my-input', {
  template: `
    <div>
      <b>My Input:</b> <br>
      localValue: {{ localValue }} <br>
      <input v-model="localValue">
    </div>
  `,
  props: ['value'],
  data() {
    return { localValue: this.value }
  },
  watch: {
    value () {
      this.localValue = this.value
    },
    localValue () {
      this.$emit('input', this.localValue)
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    parentValue: 'Inital value'
  }),
  methods: {
    change () {
      this.parentValue = 'Changed value'
    }
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <my-input v-model="parentValue"></my-input>

  <button @click="change">Change</button><br>

  parentValue: {{ parentValue }}
</div>

I have always faced difficulties when I need to do so.

I will be very grateful for the help!

• javascript
• vue.js
• vuejs2
• vue-ponent

2 Answers 2

If you avoid using v-model inside your custom form ponent, you really only need

<b>My Input:</b> <br>
localValue: {{ value }} <br>
<input :value="value" @input="$emit('input', $event.target.value)">

No data, no watch, that's it.

See https://v2.vuejs/v2/guide/ponents.html#Using-v-model-on-Components

If you really want something representing a value local to your ponent, the Vue docs favour using puted values over watchers (ref: https://v2.vuejs/v2/guide/puted.html#Watchers).

The idea here is to create a puted value with getter and setter to facilitate a simplified one-way data flow.

Vue.ponent('my-input', {
  template: `<div><b>My Input:</b> <br>localValue: {{ localValue }} <br><input v-model="localValue"></div>`,
  props: ['value'],
  puted: {
    localValue: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    parentValue: 'Inital value'
  }),
  methods: {
    change () {
      this.parentValue = 'Changed value'
    }
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <my-input v-model="parentValue"></my-input>

  <button @click="change">Change</button><br>

  parentValue: {{ parentValue }}
</div>

How to pass plex objects to child ponent (potentially down a few layers):

Parent ponent:

<child v-model='parentEntity' />

Child ponent:

model: {
    prop: 'modelValue',
    event: 'update:modelValue',
  },
  props: {
    modelValue: {
      type: Object,
      required: true,
    },
  },
...
entity: {
      // getter
      get() {
        return Object.assign({}, this.modelValue);
      },
      // setter
      set(newValue) {
        this.$emit('update:modelValue', newValue);
      },
    },
...