[Vuejs]-Vue js sync modifier doesn't update the input value

1👍

you child component should emit “this.$emit(‘update:value’, newValue)” as event
take a look over the docs: https://br.vuejs.org/v2/guide/components-custom-events.html

Also a way to do it is like this:

export default {
  template: `
              <div class="form-group">
                <div class="input-group">
                  <input @focus="$emit('focusEvent', $event)"
                         v-model="valueProp">
                </div>
              </div>
            `,
  props: {
    value: String
  },
  computed: {
    valueProp:{
            get(){
                return this.value
            },

            set(val){
                return this.$emit("update:value", val);
            }
        },
  }
  methods: {
    handleFocus() {
      this.$emit("focusEvent");
    }
  }
};

Leave a comment