In VueJS is it possible to bind something with v-model that is then rebound to another child?

Question

I have an app for which I\'m creating a custom component that will output a single row of a table. It contains a numeric field which is user-adjustable, and so within that c

Answer 1

Update: You can propagate v-model-ability down a hierarchy by making a writable computed based on the prop (the prop must be named 'value'). The get function obviously returns the prop value; the set function does the $emit.

The computed spec is entirely fixed, so I have extracted it as a constant.

const vModelComputed = {
  get() {
    return this.value;
  },
  set(newValue) {
    this.$emit('input', newValue);
  }
};

new Vue({
  el: '#app',
  data: {
    numParticipants: 1
  },
  components: {
    middleComponent: {
      props: ['value'],
      template: '
Value: {{value}} 
',
      computed: {
        localValue: vModelComputed
      },
      components: {
        qNumeric: {
          props: ['value'],
          template: '
 inner value: {{value}}
',
          computed: {
            localValue: vModelComputed
          }
        }
      }
    }
  }
});

  Participants: {{numParticipants}}