Append 輸入元素使用 vue 形成字段集

Question

正如 header 描述的那樣，我想在我的表單中將 append 輸入元素輸入到某些字段集中。 我構建了一個帶有 3 個字段集的分階段表單，這些字段集僅在單擊“下一步”按鈕時出現。

現在在字段集編號 3 中，我想根據從外部 json object 中提取的鍵輸入元素。

數據：

data: () => ({
    
        currentPage: 0,
        brand: '',
        platform: '',
        affiliate: '',
        fieldsetThree: document.getElementById("fieldset3"),
}),

Fieldset（僅在 currentPage 值為 2 時出現）：

<div v-if="currentPage === 2">
  <fieldset id="fieldset3">
    <h2 class="fs-title">API Credentials</h2>
    <h3 class="fs-subtitle">Step 3- Add any parameter for the integration</h3>
  </fieldset>
  </div>

Function 到 append 階段 2 完成后的輸入字段：

 appendFields() {
          let check = json[this.platform];

          console.log(this.fieldsetThree);
          for (const [key, value] of Object.entries(check)) {

            let inputfield = document.createElement("input");
            this.inputfield.setAttribute("type", "text");
            this.inputfield.setAttribute("name",`${key}`);
            this.inputfield.setAttribute("placeholder",`${key}`);
            console.log("Input FIeld \n", this.inputfield)
            this.fieldsetThree.appendChild(this.inputfield);
          }
          //Build it before.
        },

目標是為 JSON 中的每個鍵創建一個輸入字段，我將添加 json 格式，例如：

"exmaple": {
                "Username": "",
                "Password": "",
                "AffiliateID": "",
                "GI": "",
                "CI": "",
                "freeTextArea": ""
            },

完整代碼（無模板）：

export default {
    data: () => ({
        
            currentPage: 0,
            brand: '',
            platform: '',
            affiliate: '',

    }),
    computed: {
      platformData: function () {
          return json[this.platform];
      }
    },
    methods: {
        isNextClicked() {
            var nextStage = this.currentPage;
            this.currentPage++;
            console.log("CurrentPage =>", this.currentPage);
            $("#progressbar li").eq($("fieldset").index(nextStage)).addClass("active");
            return this.currentPage;
        },
        isPreviousClicked() {

            this.currentPage--;
            var previousStage = this.currentPage;
            console.log("CurrentPage at decrease =>", this.currentPage);
            $("#progressbar li").eq($("fieldset").index(previousStage)).removeClass("active");
            return this.currentPage;
        },
        appendFields() {
          // let check = json[this.platform];
          // console.log(this.fieldsetThree);
          // for (const [key, value] of Object.entries(check)) {
          //
          //   let inputfield = document.createElement("input");
          //   this.inputfield.setAttribute("type", "text");
          //   this.inputfield.setAttribute("name",`${key}`);
          //   this.inputfield.setAttribute("placeholder",`${key}`);
          //   console.log("Input FIeld \n", this.inputfield)
          //   this.fieldsetThree.appendChild(this.inputfield);
          // }
          //Build it before.
        },
        nextPlusappend() {
            //this.appendFields();
            this.isNextClicked();

        }
    }
}

Answer 1

如果你想出你想要保存數據的結構，那么你不需要弄亂 DOM 元素：只需將 JSON 添加到data()並讓 Vue 做它的事情。

因此，如果您將 JSON 數據結構作為表單字段和字段集的基礎，那么您可以將其添加到包含表單輸入字段的數據項中：

 const example = { "Username": "", "Password": "", "AffiliateID": "", "GI": "", "CI": "", "freeTextArea": "" } Vue.component("formFieldset", { props: ["fields"], methods: { handleInput(val, key) { this.$emit("update:fields", { key, val }) }, }, template: ` <div> <label v-for="(val, key) in fields":key="key" > {{ key }}: <input type="text":placeholder="key" @input="(e) => handleInput(e.target.value, key)" /> </label> <hr> </div> ` }) new Vue({ el: "#app", data() { return { fieldsets: [ { field1_1: "", field1_2: "", }, { field2_1: "", field2_2: "", }, ], } }, // just to add the items later to the data(): mounted() { this.fieldsets.push(example) }, methods: { handleUpdateFields({ key, val, idx }) { this.fieldsets[idx][key] = val }, }, template: ` <div> Putting out the data():<br /> {{ fieldsets }} <hr> <form> <form-fieldset v-for="(fieldset, i) in fieldsets":key="i":fields="fieldset" @update:fields="(e) => handleUpdateFields({...e, idx: i})" /> </form> </div> ` })

 label { display: block; padding: 8px 16px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>