使用 vue 将输入元素附加到表单字段集

Posted 2023-02-23

【中文标题】使用 vue 将输入元素附加到表单字段集

【英文标题】：Append input element to form fieldset using vue

【发布时间】：2021-06-24 04:01:27

【问题描述】：

如标题所述，我想将输入元素附加到表单中的某个字段集。 我构建了一个包含 3 个字段集的分阶段表单，这些字段集仅在单击“下一步”按钮时出现。

现在在第 3 个字段集中，我想根据从外部 json 对象中提取的键输入元素。

数据：

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>

第 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();

        
    

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

【讨论】：

实际上，这对我来说更难理解你在这里所做的事情，json 中的每个对象都有唯一的字段，所以我需要每个对象都是动态的，这意味着不是每个对象都有“用户名”或“密码”。我很抱歉，但我是 vue 新手，我不明白你在这里做了什么

我用 export () 的结构编辑了问题，并且要提一下，Form 是我创建的不同组件，我没有在 app.vue 中构建我的应用程序。上面的所有代码都写在 Form.vue 中