解决vue.js提交数组时出现数组下标的问题

当使用Vue.js提交表单数据数组时，会出现一个常见的问题，即无法获取到数组的下标，导致后台无法正确处理提交的数据。解决这个问题的方法很简单，本文将提供一些完整的攻略，帮助您解决这个问题。

问题分析

接下来的代码创建了一个表单，其中包含了一个可变长度的input数组。我们尝试提交这个表单，并触发表单提交事件：

<form @submit.prevent="submitForm">
  <div v-for="(item, index) in items" :key="index">
    <input type="text" v-model="items[index]">
  </div>
  <button type="submit">提交</button>
</form>

export default {
  data () {
    return {
      items: []
    }
  },
  methods: {
    submitForm() {
      console.log(this.items)
    }
  }
}

当我们填充数据并提交表单时，this.items数组中格式为：

[ "A", "B", "C" ]

这个数组没有下标，无法和后台处理代码中的数组对应。这是一个常见的问题，但是解决方法很简单。

解决方案

解决方法一：使用 v-model 绑定一个对象

一个简单的解决方案是使用 v-model 绑定一个对象。修改表单代码：

<form @submit.prevent="submitForm">
  <div v-for="(item, index) in items" :key="index">
    <input type="text" v-model="itemsObj[index]">
  </div>
  <button type="submit">提交</button>
</form>

export default {
  data () {
    return {
      items: [],
      itemsObj: {}
    }
  },
  methods: {
    submitForm() {
      console.log(this.itemsObj)
    }
  },
  computed: {
    itemsObj() {
      let obj = {};
      this.items.forEach((item, index) => {
        obj[index] = item;
      })
      return obj;
    }
  }
}

修改后我们应该使用 itemsObj 替换 items 数据源。我们使用了一个计算属性来将 items 转化为对象，然后使用对象的方式将数据提交到后台。这样我们就可以获取到正确的数组下标信息。

解决方法二：手动绑定数组下标

另外一个解决方案是手动绑定数组下标。在模板中添加一个 name 属性，并使用 v-bind 手动绑定下标值：

<form @submit.prevent="submitForm">
  <div v-for="(item, index) in items" :key="index">
    <input :name="'items['+index+']'" type="text" v-model="items[index]">
  </div>
  <button type="submit">提交</button>
</form>

export default {
  data () {
    return {
      items: []
    }
  },
  methods: {
    submitForm() {
      console.log(this.items)
    }
  }
}

这个方法会手动将下标绑定到 name 属性中，然后在后台代码中使用 $_POST['items'] 来接收提交的数据。

示例说明

下面我们将使用两个示例来演示如何解决这个问题：

示例一

该示例创建一个可变长度的数组表单，提交并打印出结果。通过修改 itemsObj 在后台获取正确的数组下标打印出来。

<template>
    <div>
        <form @submit.prevent="submitForm">
            <div v-for="(item, index) in items" :key="index">
                <input type="text" v-model="itemsObj[index]">
            </div>
            <button type="submit">提交</button>
        </form>

        <p>提交的表单数据: {{ formData }}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: [],
                itemsObj: {}
            }
        },
        computed: {
            formData() {
                return JSON.stringify(this.itemsObj);
            }
        },
        methods: {
            submitForm() {
                console.log(this.itemsObj);
            }
        },
        watch: {
            items(newVal) {
                // 更新 itemsObj
                this.itemsObj = newVal.reduce((res, cur, index) => {
                    res[index] = cur;
                    return res;
                }, {})
            }
        }
    }
</script>

示例二

该示例手动绑定数组下标，使用 v-bind 将提交的表单数据打印出来。

<template>
    <div>
        <form @submit.prevent="submitForm">
            <div v-for="(item, index) in items" :key="index">
                <input :name="'items['+index+']'" type="text" v-model="items[index]">
            </div>
            <button type="submit">提交</button>
        </form>

        <p>提交的表单数据: {{ formData }}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: []
            }
        },
        computed: {
            formData() {
                return JSON.stringify(this.items);
            }
        },
        methods: {
            submitForm() {
                console.log(this.formData);
            }
        }
    }
</script>

这个示例没有引入 itemsObj 对象，而是手动绑定数组下标，并在后台使用 $_POST['items'] 来获取提交的数据。