【Nuxt.js v2】ボタン押下で入力フォームを追加する

やりたいこと

任意かつ複数入力可能な項目があり、動的に入力フォームを追加するという場合の対応です。

実装

styleの記述は省略しています。

<template>
  <ul>
    <li>
      <button @click="addForm()">フォーム追加</button>
    </li>
    <li v-for="(form, index) in forms" :key="index">
      <input v-model="forms[index]" />
      <button @click="deleteForm(index)">×</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      forms: []
    }
  },
  methods: {
    addForm () {
      this.forms.push('')
    },
    deleteForm (index) {
      this.forms.splice(index, 1)
    }
  }
}
</script>

フォーム追加ボタンで追加、フォーム横にあるバツボタンで削除ができます。