CODEWITHSUNDEEP
formsvue.js
Seltsam
Seltsam

Reputation: 944

Dynamic Vue Form from Input-Elements

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?

Upvotes: 0

Views: 1596

Answers (1)

Roy J
Roy J

Reputation: 43881

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>

Upvotes: 1

Related Questions