Vue: добавить новый ввод динамической формы, когда значение добавляется к предыдущему вводу

avatar
Jleibham
7 апреля 2018 в 23:39
10095
2
2

, поэтому мне нужно, чтобы ввод формы создавался всякий раз, когда пользователь добавляет значение к предыдущему вводу. Я нашел несколько отличных вопросов о том, как создавать динамические формы, а также о том, как отслеживать входные данные формы для вызова функции, но я не знаю, как объединить эти два метода и заставить их работать вместе.

new Vue({
  el: '#form',
  data: {
    items: [],
  },
  methods: {
    addItem() {
      this.items.push({
        value: ''
      });
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="form">
  <input v-for="item in items" v-model="item.value">
  <button @click="addItem">add</button> {{items}}
</div>

Итак, в настоящее время я могу заставить это работать, добавив кнопку для добавления нового ввода, но ввод не отображается до тех пор, пока вы не нажмете кнопку. Я попробовал v-for="item in items + 1", но это привело к сумасшедшим неожиданным результатам, и, подумав об этом, я понял, почему это не сработает. Мне бы очень хотелось иметь поле ввода при загрузке, и если пользователь добавит какое-либо значение в это поле, будет создано новое.

Источник

Ответы (2)

avatar
Jleibham
7 апреля 2018 в 23:47
7

Хорошо, я на самом деле только что понял это самостоятельно :p Мне нужно запустить функцию на монтировании, а затем использовать v-on:change.once для запуска функции.

Теперь мне просто нужно выяснить, как удалить поле ввода, когда оно пусто.

new Vue({
  el: '#form',
  data: {
    items: [],
  },
  methods: {
    addItem() {
      this.items.push({
        value: ''
      });
    }
  },
  mounted() {
    this.addItem()
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="form">
  <input v-for="item in items" v-model="item.value" @change.once="addItem()">
</div>
avatar
Psidom
7 апреля 2018 в 23:45
4

Инициализация вашего items с помощью [{ value: '' }] работает:

new Vue({
  el: '#form',
  data: {
    items: [{
        value: ''
    }],
  },
  methods: {
    addItem() {
      this.items.push({
        value: ''
      });
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="form">
  <input v-for="item in items" v-model="item.value">
  <button @click="addItem">add</button> {{items}}
</div>
Jleibham
7 апреля 2018 в 23:50
0

Ах, я пробовал что-то подобное value: [''] , но значение не редактировалось таким образом. Я действительно решил проблему выше, но ваша чище.

Psidom
7 апреля 2018 в 23:52
0

Да. Я думаю, что логика та же; Вы отвечаете, что добавляете объект, когда компонент mounted, а мой добавляет объект в качестве начального значения.