Vuejs如何提交陣列

我有一個表單，可以讓用戶輸入同一欄位的多個輸入，所以我將值設定為一個陣列，但我無法成功提交表單。

錯誤 1：該值將始終為“未定義”，我認為這是因為我設定陣列的方式不正確。

錯誤 2：即使我提交了多個輸入，系統也只能得到 1 個結果。

我只展示了我設定陣列的代碼以及如何提交它，而不是整個 ajax，因為它會顯示太多代碼。

HTML：

<div class="form-group row" id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index">
    <label class="col-sm-3 col-form-label">Domain</label>
    <div class="col-sm-9" >
        <input type="text" align="middle" v-model="input.addDomain" class="form-control input-lg">  
        <a @click="addField()"><i class="fa fa-plus-circle" ></i></a>           
        <a @click="removeField(index)"><i class="fa fa-remove" style="color:red"></i></a>
    </div>
</div>   
<button type="button" class="btn btn-default btn-submit" @click="addCompanySetting">submit</button>

Vuejs：

<script>
export default {
  data() {
        return {
            addDomain: [{domain:""}],
  },
methods : {
addCompanySetting(){
            var VUE = this
            var postExtraData = '';
            var input =  _.findIndex(this.addDomain.data, { 'domain': this.input.domain });
            var postData = '&domain=' this.addDomain[input]';
            var valid = this.validator();//validation to check the input is not empty
            if(valid){
                $.ajax({
                    url:baseUrl '/agency/account/prefer-ma',
                    type: 'POST',
                    data: postData,
                    dataType: 'json'
                }).done(function (data){
                    if(data.result == "1"){
                        VUE.inputAddPrefix = '-';
                        VUE.addDomain = null;
                        $('#addApiSettingModal').modal('toggle');
                    }
        },
},

addField() {      
  this.addDomain.push({domain:""});
},

removeField(index) {
   this.addDomain.splice(index, 1);
},

},

uj5u.com熱心網友回復：

觀察：

• 因為您的物件中沒有任何addDomain財產input。因此它應該v-model="input.domain"代替v-model="input.addDomain".
• addDomain是一個陣列。data您在 addDomain 中沒有任何屬性。
• 因為我們的資料中沒有任何input屬性。因此，this.input.domain將回傳未定義。

作業演示：

new Vue({
  el: "#app",
  data: {
    addDomain: [{
        domain: 'www.abc.com'
    }, {
        domain: 'www.def.com'
    }, {
        domain: 'www.ghi.com'
    }, {
        domain: 'www.jkl.com'
    }, {
        domain: 'www.mno.com'
    }]
  },
  methods: {
    addCompanySetting() {
      // Add your logic here
        console.log('input domains', this.addDomain);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="form-group row" id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index">
    <label class="col-sm-3 col-form-label">Domain</label>
    <div class="col-sm-9">
      <input type="text" align="middle" v-model="input.domain" class="form-control input-lg"/>  
      <a @click="addField()"><i class="fa fa-plus-circle" ></i></a>           
      <a @click="removeField(index)"><i class="fa fa-remove" style="color:red"></i></a>
    </div>
  </div>   
<button type="button" class="btn btn-default btn-submit" @click="addCompanySetting">submit</button>
</div>

uj5u.com熱心網友回復：

我已經重構了您的代碼并對其進行了一些改進，我已經為您制作了一個作業沙箱。 沙盒鏈接

<template>
  <div id="app">
    <div
      class="form-group row"
      id="id-inputAddDomain"
      v-for="(input, index) in addDomain"
      :key="index"
    >
      <label class="col-sm-3 col-form-label">Domain</label>
      <div class="col-sm-9">
        <input
          type="text"
          align="middle"
          v-model="input.domain"
          class="form-control"
        />
        <a @click="addField()" class="btn btn-info"
          ><i class="fa fa-plus-circle"></i
        ></a>
        <a @click="removeField(index)" class="btn btn-danger"
          ><i class="fa fa-minus" style="color: white"></i
        ></a>
      </div>
    </div>
    <button
      type="button"
      class="btn btn-success btn-submit"
      @click="addCompanySetting"
    >
      submit
    </button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      addDomain: [{ domain: "" }],
      baseUrl: "",
    };
  },
  methods: {
    addCompanySetting() {
      console.log(this.addDomain);
      axios
        .post(this.baseUrl   "/agency/account/prefer-ma", this.addDomain)
        .then((response) => {
          if (response.data.result === "1") {
            this.inputAddPrefix = "-";
            this.addDomain = null;
            $("#addApiSettingModal").modal("toggle");
          }
        });
    },

    addField() {
      this.addDomain.push({ domain: "" });
    },

    removeField(index) {
      this.addDomain.splice(index, 1);
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

標籤：javascript jQuery Vue.js

上一篇：Vue3：為命名插槽設定樣式

下一篇：為什么WebStorm將Vue中的布爾屬性標記為在Vue組件中無效？