Question

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

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

应用于实例

这很有效：https://jsfiddle.net/seltsam23/hrL3ec3z/9/

虽然缺少一个细节：我只需要查询children-input-fields，而不是查询站点范围的字段，以防我同时使用多个表单组件：

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（）阶段创建数据路径属性，以将v模型值存储在元素本身上，但在挂载之后，所有这些创建的属性都会消失。

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

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>

输入元素的动态Vue表单

1 个答案: