Building Forms with Vue.js

Dynamically binding the user's data

What good is any form if we can't use the data that the user inputs? As cool as it is that we can generate these forms dynamically based entirely on a schema, we still need to be able to store these values somehow so that we can later process them as we need. The first step for our form to be able to create two-way bindings is to tell Renderer.vue how to handle input events from the dynamic components.

Follow these steps:

1. Let's go into Renderer.vue and add a :value binding, as well as an @input listener to the <component>:

      <component         :is="component"         v-bind="props"        :value="value"        @input="handleComponentInput"      />

Remember that, in order to v-model or two-way bind into a custom component, we usually need ...