Question

我有几个通过v-for循环呈现的字段：

<div v-for="element in elements" class="uk-form-row uk-margin-small-top">
  <input class="uk-width-1-1 uk-form-small" type="text" placeholder="element" style="width:50%">
</div>

我需要通过POST请求来传递它们。

元素只是一个数组，其中包含不同数量的

value: ""

提交表单后，数组只是空对象的集合

如何更改代码以传递来自这些字段的值的数组？

Answer 1

尝试使用v-model指令将输入绑定到数组项：

 <div v-for="element in elements" class="uk-form-row uk-margin-small-top">
     <input v-model="element.value" class="uk-width-1-1 uk-form-small" type="text" placeholder="element" style="width:50%">
  </div>

之后，您可以直接在POST请求中使用elements数组。

new Vue({
  el: '#app',
  data: {
    elements: []
  },
  methods: {
    addElement: function() {
      this.elements.push({
        value: ''
      });
    }
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
  <h1>Elements</h1>
  <div v-for="element in elements">
    <input class="form-control" v-model="element.value" type="text" />
  </div>
  <button class="btn btn-primary" @click="addElement">
    New Element
  </button>
  <pre>{{ $data | json }}</pre>
</div>

获取v-for循环[Vue.js]中多个输入字段的值

1 个答案: