Question

如何绑定动态生成的表单的属性？

echo os.system('/bin/bash')

单击提交按钮时，我需要在将其发送到服务器之前获取所有值。我怎么能跟踪这些值？

Answer 1

我想出来了！实际上有一种聪明的方法可以达到这个目的。

我们需要定义一个空object的数据属性。所以重点是将此对象绑定到表单。对象中的键可以是id，name或任何有助于识别目的的键，值将自动成为字段的值。

以下是示例：

<template v-if="table.length > 0 && colInfo.length > 0">

 <div class="form-group" v-for="col in colInfo">
    <template v-if="col.Type == 'text'">
        <label class="badge badge-info">{{col.Field}}</label>
        <textarea class="form-control form-control-md" rows="3" v-model="insertMap[col.Field]"></textarea>
    </template>
    <template v-else>
        <label class="badge badge-info">{{col.Field}}</label>
        <input type="text" class="form-control form-control-md" v-model="insertMap[col.Field]">
    </template>
 </div>

</template>

在上面的示例中，insertMap是对象，它是此表单的绑定属性。希望这会有所帮助。

Answer 2

改为使用v-model。

const app = new Vue({
  el: '#app',
  data: {
    colInfo: [
      {Type: 'input', Field: 'First Name', Value: 'John' },
      {Type: 'input', Field: 'Last Name', Value: 'Doe' },
      {Type: 'text', Field: 'Comment', Value: '3141592653589793238462643383279502' }
    ],
    dataToBeSent: undefined
  },
  methods: {
    submit() {
      this.dataToBeSent = this.colInfo.map((col) => col.Value)
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <div class="form-group" v-for="col in colInfo">

    <template v-if="col.Type == 'text'">
      <label class="badge badge-info">{{col.Field}}</label>
      <textarea 
        class="form-control form-control-md" 
        rows="3" 
        v-model="col.Value">
      </textarea>
    </template>

    <template v-else>
      <label class="badge badge-info">{{col.Field}}</label>
      <input 
        type="text" 
        class="form-control form-control-md" 
        v-model="col.Value">
    </template>
    
    
  </div>
  <button v-on:click="submit()">Submit</button>
  <div>
    <h3>colInfo</h3>
    <div>{{colInfo}}</div>
  </div>
  <div>
    <h3>Submitted Item</h3>
    <div>{{dataToBeSent}}</div>
  </div>
</div>

绑定动态生成的表单的属性

2 个答案: