Javascript 如何在VueJS中动态创建输入字段

我正在尝试动态地添加或删除输入字段

我从这里得到了一个简单的解决方案，很有效。但是，在数据库中保存输入值会停止其功能

组件代码：

<div class="form-group" v-for="(input,k) in inputs" :key="k">
  <input type="text" class="form-control" v-model="input.name" />
  <input type="text" class="form-control" v-model="input.party" />
  <span>
    <i
      class="fas fa-minus-circle"
      @click="remove(k)"
      v-show="k || ( !k && inputs.length > 1)"
    ></i>
    <i
      class="fas fa-plus-circle"
      @click="add(k)"
      v-show="k == inputs.length-1"
    ></i>
  </span>
</div>
<button @click="addCandidate">
  Submit
</button>

<script>
  export default {
    data() {
      return {
        inputs: [
          {
            name: "",
            party: ""
          }
        ]
      };
    },
    methods: {
      add(index) {
        this.inputs.push({ name: "", party: "" });
      },
      remove(index) {
        this.inputs.splice(index, 1);
      },
      addCandidate() {
        axios
          .post("/candidates", this.inputs)
          .then(response => {})
          .catch(error => {});
      }
    }
  };
</script>

提交
导出默认值{
数据（）{
返回{
投入：[
{
姓名：“，
缔约方：“”
}
]
};
},
方法：{
添加（索引）{
this.inputs.push（{name:，party:}）；
},
删除（索引）{
此输入拼接（索引1）；
},
addCandidate（）{
axios
.post（“/candidates”，此.inputs）
。然后（响应=>{}）
.catch（错误=>{}）；
}
}
};

---

我总是收到一个422错误，说输入字段是空的。

这不是Vue问题。在发送数组之前，需要对其调用

JSON.stringify（）

，然后使用Laravel在服务器上对其进行解码。例如：

foreach(json_decode($request -> input('my_prop_name ')) as $my_object_in_array)
{
  print_r($my_object_in_array); // this is your object name/party
}

Vue代码像魔术一样工作。：）

newvue({
el:“#应用程序”，
数据（）{
返回{
投入：[{
名称：“”，
参与方：''
}]
}
},
方法：{
加（）{
这是推({
名称：“”，
参与方：''
})
console.log（this.inputs）
},
删除（索引）{
本.输入.拼接（索引，1）
},
添加候选人（）{
axios
.post（“/候选人”{
我的项目名称：JSON.stringify（this.inputs）
})
。然后（响应=>{}）
.catch（错误=>{}）
}
}
})

去除
添加字段
提交