Dynamic Vue Form from Input-Elements

Question

I'm building a reusable vue-form-component. For more flexibility the basic idea is to NOT have to specify the form information in the vue-data-object beforehand, but to get the data-structure from the dom-input-elements itself.

On instance-creation the "v-model" attributes are read from the input-tags and applied to the instance via vue.set()

This works fairly well: https://jsfiddle.net/seltsam23/hrL3ec3z/9/

One detail is missing though: I need to only query the children-input-fields, and not the site-wide fields in case I'm using more than one form-component at the same time:

created() {
    var inputs = document.querySelectorAll('input'); // works, but this returns ALL elements
    var inputs = this.$el.querySelectorAll('input'); // Doesn't work because $el is only available after mounted().
    ...
}

mounted() {
     var inputs = this.$el.querySelectorAll('input'); // works, but attribute "v-model" is removed from inputs at this point
     ...
}

I've tried to create data-path attribute in the created() phase to store the v-model value on the element itself, but after mount all those created attributes disappear.

Any ideas how to achieve this in an elegant way?

@RoyJ Would you help me understand how I can solve my Issue with the information given in those topics? — Seltsam
– Seltsam, Commented Jan 4, 2018 at 12:51

Roy J · Accepted Answer · 2018-01-04 14:38:58Z

1

You should be aware that the only reason you see v-model attributes at all is that you're using inline-template. They are in the DOM during the created phase because the template has not yet been processed. What I'm saying is that you're trying to do something pretty hacky, and you probably shouldn't.

It's backward to the normal Vue approach of having the data model drive the DOM, but I know that in some cases it is useful to initialize things from the HTML.

How about this approach?

Vue.component('my-form', {
  props: ['init'],
  data() {
    return {
      form: {}
    }
  },
  created() {
    this.form = this.init;
  }
})

new Vue({
  el: '#vue',
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="vue">
  <my-form inline-template :init="{foo: {bar: 'one', baz: 'two'}}">
    <form>
      <input type="text" v-model="form.foo.bar">
      <span v-text="form.foo.bar"></span>
      <hr>
      <input type="text" v-model="form.foo.baz">
      <span v-text="form.foo.baz"></span>
    </form>
  </my-form>
</div>

edited Jan 4, 2018 at 14:38

answered Jan 4, 2018 at 14:28

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Seltsam Over a year ago

Ouch, this truly is way more robust. Thanks

Collectives™ on Stack Overflow

Dynamic Vue Form from Input-Elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related