来自输入元素的动态 Vue 表单

Question

我正在构建一个可重用的 vue-form-component。为了获得更大的灵活性，基本思想是不必事先在 vue-data-object 中指定表单信息，而是从 dom-input-elements 本身获取数据结构。

在创建实例时，从输入标签中读取“v-model”属性并通过vue.set() 应用到实例

这很好用：https://jsfiddle.net/seltsam23/hrL3ec3z/9/

但缺少一个细节：如果我同时使用多个表单组件，我只需要查询子输入字段，而不是站点范围的字段：

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
     ...
}

我尝试在 created() 阶段创建 data-path 属性以将 v-model 值存储在元素本身上，但挂载后所有这些创建的属性都消失了。

任何想法如何以优雅的方式实现这一目标？

Answer 1

您应该知道，您看到v-model 属性的唯一原因是您使用的是inline-template。它们在 created 阶段位于 DOM 中，因为尚未处理模板。我的意思是，您正在尝试做一些非常老套的事情，而您可能不应该这样做。

这倒退到了让数据模型驱动 DOM 的常规 Vue 方法，但我知道在某些情况下，从 HTML 初始化事物很有用。

这种方法怎么样？

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>