vue.js 将数据从动态创建的字段存储到列表中答案

【问题标题】：vue.js store data into list from dynamically created fieldsvue.js 将数据从动态创建的字段存储到列表中
【发布时间】：2020-11-05 14:46:50
【问题描述】：

dynamically created fields

您好，上图显示了我正在使用的动态创建的字段。您可以使用右侧的按钮添加或删除字段。

我的目标是

将输入到这些动态创建的字段的数据存储到列表中
绑定数据/提交前在确认页面显示数据

预期的结果是，当我在这些字段中键入数据时，它会在提交表单之前显示在确认页面上

我尝试过使用 v-model，但这仅适用于普通字段。这是我现在拥有的代码

<template>
  <div>
    <div v-for="(line, index) in lines" :key="index" class="row">
      <div class="col-lg-6">
        <div class="row">
          <div class="col-2">
            <q-select
              v-model="line.countryCode"
              label="Country Code"
              :options="countryPhoneCodes"
            />
          </div>
          <div class="col-10">
            <q-input
              v-model="line.number"
              label="Phone Number"
              placeholder="5551234567"
              type="tel"
              value=""
            />
          </div>
        </div>
      </div>

      <div class="col-lg-4">
        <q-select
          v-model="line.phoneUsageType"
          label="Type of Usage"
          :options="phoneUsageTypes"
        />
      </div>

      <div class="col-lg-2">
        <div class="block float-right">
          <q-btn round @click="removeLine(index)" icon="delete" />
          <q-btn round v-if="index + 1 === lines.length" @click="addLine" icon="playlist-plus" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PhoneNumberLine',
  data () {
    return {
      lines: [],
      blockRemoval: true,
      phoneUsageTypes: [
        {
          label: 'Home', value: 'home'
        }, {
          label: 'Work', value: 'work'
        }, {
          label: 'Mobile', value: 'mobile'
        }, {
          label: 'Fax', value: 'fax'
        }
      ],
      countryPhoneCodes: [
        {
          label: '+90',
          value: '+90'
        }, {
          label: '+1',
          value: '+1'
        }
      ]
    }
  },
  watch: {
    lines () {
      this.blockRemoval = this.lines.length <= 1
    }
  },
  methods: {
    addLine () {
      let checkEmptyLines = this.lines.filter(line => line.number === null)
      if (checkEmptyLines.length >= 1 && this.lines.length > 0) {
        return
      }
      this.lines.push({
        countryCode: null,
        number: null,
        phoneUsageType: null
      })
    },
    removeLine (lineId) {
      if (!this.blockRemoval) {
        this.lines.splice(lineId, 1)
      }
    }
  },
  mounted () {
    this.addLine()
  }
}
</script>

【问题讨论】：

标签： javascript list vue.js dynamic

【解决方案1】：

这应该与您想要实现的目标相似。调整它以满足您的需求。祝你好运。

const makeLine = (n = 0) => ({
  number: n
});

new Vue({
  name: "App",
  template: `
    <div>
      <div class="line" v-for="(line, idx) in lines" :key="idx">
          <input v-model="line.number" />
          <button @click="addLine" v-if="lines.length - 1 === idx">+</button>
          <button @click="removeLine(idx)" v-if="lines.length > 1">-</button>
      </div>
    </div>
  `,
  data() {
    return {
      lines: [
        makeLine(),
      ],
    }
  },
  methods: {
    addLine() {
      this.lines.push(makeLine(this.lines.length));
    },
    removeLine(idx) {
      this.lines = this.lines.filter((_, id) => id !== idx);
    }
  }
}).$mount("#app");

#app {
  display: flex;
  flex-direction: column;
}

.line {
  display: flex;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app"></div>

【讨论】：