时间戳

首页 > 解决方案 > 如何在vue中动态附加输入元素

javascript - 如何在vue中动态附加输入元素

问题描述

我正在尝试根据条件附加新的输入字段，我将描述工作流程以帮助您理解

第一阶段是按下此按钮以实现 2 个功能（1 是移动到分阶段表单中的其他字段集，第二个功能是附加输入：

<input type="button" name="secondBtn" class="next action-button" value="Next" id="secondBtn" @click="nextPlusappend"/>

nextPlus 附加：

nextPlusappend() {
    this.isNextClicked();
    this.appendFields();
}

附加字段：

    //this.platform initllized as 'one' so the condition is true.


 if(this.platform === 'one'){
        this.inputFields.push({
            Username: '',
            Password: '',
            AffiliateID: '',
            CI: '',
            GI: '',
        })
    }

我想将函数中的所有字段附加到这个字段集中：

<div v-if="currentPage === 2">
  <fieldset id="fieldset3"  v-for="(param, index) in inputFields" :key="index">
    <h2 class="fs-title">API Credentials</h2>
    <h3 class="fs-subtitle">Step 3- Add any parameter for the integration</h3>

    <input v-model="param.Username" type="text" name="`inputFields[${index}[Username]]`" placeholder="userName">
    <input type="button" name="previous" class="previous action-button" value="Previous" @click="isPreviousClicked"/>
    <input type="submit" name="submit" class="submit action-button" value="Create a Ticket" id="excel"/>
  </fieldset>
  </div>

我如何在没有硬编码所有输入字段的情况下附加它，就像我在这里所做的那样：？

<input v-model="param.Username" type="text" name="`inputFields[${index}[Username]]`" placeholder="userName">

这被指定为动态的，我是什么意思？我的意思是，如果 this.platform 等于“one”，就会有一个唯一的字段，如果 this.platform 等于“two”，例如会有其他的唯一字段。

标签： javascriptvue.js

解决方案

不要像“推送一个表单域”那样思考，而应该像“向数据集添加一个新项目”那样思考（当然，它显示的 UI 是一个表单域）。

让我举个例子：

Vue.component("FormField", {
  props: ["label", "value"],
  computed: {
    val: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("update:value", val)
      }
    },
  },
  methods: {
    handleClickAdd() {
      this.$emit("click-add-field")
    }
  },
  template: `
    <div>
      <label>
        {{ label }}: <input type="text" v-model="val" />
      </label>
      <button
        @click="handleClickAdd"
      >
        + ADD
      </button>
    </div>
  `,
})

new Vue({
  el: "#app",
  data() {
    return {
      formFields: [{
        label: "Field 1",
        value: null,
      }],
    }
  },
  methods: {
    handleClickAddField() {
      const item = {
        label: `Field ${ this.formFields.length + 1 }`,
        value: null,
      }
      this.formFields = [...this.formFields, item]
    },
  },
  template: `
    <div
      class="container"
    >
      <div
        class="col"
      >
        <h4>FIELDS:</h4>
        <hr>
        <form-field
          v-for="(field, i) in formFields"
          :key="i"
          :label="field.label"
          :value.sync="field.value"
          @click-add-field="handleClickAddField"
        />
      </div>
      <div
        class="col"
      >
        <h4>FIELD VALUES:</h4>
        <hr>
        <div
          v-for="(field, i) in formFields"
          :key="i"
        >{{ field.label }}: {{ field.value }}</div>
      </div>
    </div>
  `,
})
.container {
  display: flex;
}

.col {
  padding: 0 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

您可以看到，ADD我刚刚在模板中添加了一个新项目formFields- 值在模板中绑定到一个子组件，该子组件处理字段的实际表示。

在片段的右侧，您可以看到将数据与 UI 解耦的另一个好处：我创建了同一数据源的另一个表示 - 立即对任何更改做出反应！

推荐阅读