Question

我想呈现一些表单并将它们绑定到Vue。表格在json上列出像这样。

formslist:[
    "<input type='text' name='item1' v-model='item1'>",
    "<input type='text' name='item2' v-model='item2'>",
]

我可以渲染它们但不能绑定。模板就是这个。

<div v-for="form in formslist">
    <div v-html="form"></div>
</div>

后来，我明白了html添加了＆＃34; v-html＆＃34;不能使用数据绑定。但后来我不知道如何做到这一点。有人会教我很好的解决方案吗？

抱歉缺少单词。我写了这样的代码，但＆＃34; item1＆＃34;和＆＃34; item2＆＃34;没有绑定。

JS：

new Vue({
  el: '#app',
  data() {
    return {
      formData: {},
      formslist:
        // this list is got by ajax as neccessary
        {
            "item1": "<input type='text' name='item1' v-model='formData.item1'>",
            "item2": "<input type='text' name='item2' v-model='formData.item2'>",
        }
    };
  },
  methods: {
    submit() {
      alert('formdata: ' +  JSON.stringify(this.formData));

      // submit data to backend
      // e.g. axios.post(...).then(...).catch(...);
    }
  }
})

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
  <form name="myForm" @submit.prevent="submit">
    <div class="form-group">
      <label>Firstname</label>
      <input class="form-control" v-model="formData.firstName" type="text">
    </div>
    <div class="form-group">
      <label>Lastname</label>
      <input class="form-control" v-model="formData.lastName" type="text">
    </div>
    <div class="form-group">
      <label>Description</label>
      <textarea class="form-control" v-model="formData.description"></textarea>
    </div>

    <div class="form-group" v-for="(form, name) in formslist">
      <label>{{name}}</label>
      <div v-html="form"></div>
    </div>

    <button type="submit">
      Submit
    </button>
  </form>
</div>

Answer 1

Vue.js面向模型/数据 - 请查看docs以了解更多信息。

因此，创建一个模型，您可以在其中存储表单数据，然后使用该模型提交数据或对数据执行任何您喜欢的操作。

请查看下面的基本示例或此fiddle。

更新01.07.2017

好的，现在我明白了你要做的事情。请在下方或小提琴处找到我的更新代码（相同链接）。

您还可以使用vue-form-generator之类的表单生成器。它和我的演示一样 - 只需要更少的编码。

它是如何工作的？

表单将使用模板呈现，该模板从您可以从服务器获取的模型中获取数据。

输入的类型不能与:type绑定，因为v-model不支持该输入 - 我尝试时会出现错误消息。所以要写一点，但应该清楚这是如何工作的。为其他类型添加类似的模板标签。

要进一步改进模型，您还可以存储表单的顶级，以便您也可以自定义该显示类。例如类似的东西：

{
  formName: 'myForm',
  className: 'form-horizontal',
  items: [...] // same array as before
}

如果您需要对某些输入进行分组或以不同方式显示它们，则可以向模型添加更多属性，为模板添加更多逻辑。

＆＃13;

const formRenderModel = [{
  type: 'text',
  modelName: 'firstName',
  className: 'form-control',
  labelText: 'First name',
  required: true
}, {
  type: 'text',
  modelName: 'lastName',
  className: 'form-control',
  labelText: 'Last name',
  required: true
}, {
  type: 'text',
  modelName: 'description',
  className: 'form-control',
  labelText: 'Description',
  required: true,
  pattern: '.{10,}', // minimum 10 characters
  validationMessage: 'Minimum 10 characters required'
}];

new Vue({
  el: '#app',
  data() {
    return {
      formData: {}
    };
  },
  created() {
    // later axios.get('/form-render).then(...).catch(...);
    // now just a constant
    this.formRenderModel = formRenderModel;
  },
  methods: {
    submit() {
      console.log('formdata', this.formData);

      // submit data to backend
      // e.g. axios.post(...).then(...).catch(...);
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
  <form name="myForm" @submit.prevent="submit">
    <div v-for="inputModel in formRenderModel">
      <label>{{inputModel.labelText}}</label>
      <template v-if="inputModel.type == 'text'">
        <input type="text" v-model="formData[inputModel.modelName]"     
          :class="inputModel.className" 
          :pattern="inputModel.pattern"  
          :title="inputModel.validationMessage"
          :required="inputModel.required" />
      </template>
      <!-- add more templates for radios, checkboxes, .. -->
    </div>
    <button type="submit">
      Submit
    </button>
  </form>
</div>

＆＃13;

如何使用vue.js绑定动态添加的表单输入

1 个答案:

它是如何工作的？