[Nuxt.js] 버튼을 눌러 입력 양식 추가

하고 싶은 일

여러 항목을 임의로 입력할 수 있고, 입력 창을 동적으로 추가할 수 있습니다.

이루어지다

스타일의 기술이 생략되었다.

<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>

창 단추를 추가하면 창 옆에 있는 단추를 통해 삭제할 수 있습니다.