Question

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

我从这里https://smarttutorials.net/dynamically-add-or-remove-input-textbox-using-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>

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

Answer 1

这不是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代码就像魔术一样工作:)

new Vue({
  el: '#app',
   data() {
           return {
            inputs:
                [{
                    name: '',
                    party: ''
                 }]

                  }
                },
          methods: {
          add(index) {
             this.inputs.push({ name: '', party: '' });
            console.log( this.inputs)
           },
          remove(index) {
             this.inputs.splice(index, 1);
           },
          addCandidate() {
          axios.post('/candidates',   {my_prop_name :JSON.stringify(this.inputs)}).then(response => {
          }).catch(error => {
          });
          }
          
        }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=app>    
<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)">Remove</i>
             <i class="fas fa-plus-circle" @click="add(k)" 
             v-show="k == inputs.length-1">Add fileds</i>
             </span>
             </div>
             <button @click="addCandidate">
              Submit
             </button>
</div>

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

1 个答案: