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

Posted 2023-02-22

【中文标题】如何在 VueJS 中动态创建输入字段

【英文标题】：How to dynamically create Input Fields in VueJS

【发布时间】：2019-11-25 11:13:44

【问题描述】：

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

我从这里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 错误，说输入字段为空。

【参考方案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 () 
      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 => )
    
  
)

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<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 fields</i>
    </span>
  </div>
  <button @click="addCandidate">
    Submit
  </button>
</div>