Vue.js에서 입력 양식 수를 동적으로 제어하는 ​​방법

전치

비망록 정도의 투고입니다.

[
  {
    id: 1,
    title: "起床",
    description: "きっとねむい",
    date: "2019-07-11",
    time: "09:00",
  },
  {
    id: 2,
    title: "出勤",
    description: "まだねむい",
    date: "2019-07-11",
    time: "10:00",
  },
......
]

이러한 느낌의 형식의 오브젝트 데이터를 복수 등록하는,
왜냐하면 웹 앱이라면 자주 있습니다.

참가하고 있는 프로젝트에서 바로 그런 처리를 쓸 기회가 있었으므로 소개합니다.

기능은 아래와 같습니다.
1. 서버에서 가져온 데이터를 양식에 표시합니다. (이번에는 상수 파일로 재현)
2. 양식을 증가, 감소
3. 일부 양식의 문자 수 표시

일단 프런트 측에서의 거동은 얼른 위와 같습니다.
서버측의 갱신 처리는, 일단 데이터를 지우고 나서 보내 온 것으로 덮어쓰는 방법이면,
전면 측에서 송신 데이터는 간단합니다.

해보자

이번 데이터는 하기.

todoList.js

const TODO_LIST = [
  {
    id: 1,
    title: "起床",
    description: "きっとねむい",
    date: "2019-07-11",
    time: "09:00",
  },
  {
    id: 2,
    title: "出勤",
    description: "まだねむい",
    date: "2019-07-11",
    time: "10:00",
  }
];

export default TODO_LIST;

초기 표시는 두 가지 양식이 나오면 좋네요.

완제품

완성된 것이 이쪽입니다.


각 양식에 삭제 버튼,
하단에 추가 버튼,
타이틀과 설명에는 문자수 카운트를 표시하고 있습니다.

코드는 이쪽

FormHandling.vue

<template>
  <div class="body">
    <div v-for="(todo, index) in todoList" class="form">
      <div class="form-component">
        <div class="form-component_title">
          日付
        </div>
        <div class="form-component_content">
          <input type="date" v-model="todo.date">
        </div>
      </div>
      <div class="form-component">
        <div class="form-component_title">
          時間
        </div>
        <div class="form-component_content">
          <input type="time" v-model="todo.time">
        </div>
      </div>
      <div class="form-component">
        <div class="form-component_title">
          タイトル
        </div>
        <div class="form-component_content">
          <input type="text" v-model="todo.title">
          {{ todo.title.length }} / 30
        </div>
      </div>
      <div class="form-component">
        <div class="form-component_title">
          説明
        </div>
        <div class="form-component_content">
          <textarea v-model="todo.description"></textarea>
          {{ todo.description.length }} / 30
        </div>
      </div>
      <div class="commands">
        <button v-on:click="deleteForm(index)">削除</button>
      </div>
    </div>
    <div class="commands">
      <button v-on:click="addForm">追加</button>
    </div>
  </div>
</template>

<script>
import TODO_LIST from '../data/todoList';

export default {
  mixins: [TODO_LIST],
  data () {
    return {
      todoList: [], //todoリスト
    }
  },
  created() {
    this.todoList = TODO_LIST;
  },
  methods: {
    addForm() {
      const additionalForm = {
        title: "",
        description: "",
        date: "",
        time: "",
      }
      this.todoList.push(additionalForm);
    },
    deleteForm(id) {
      this.todoList.splice(id, 1);
    }
  }
}
</script>

외관상, 적당한 스타일을 맞추기 위해서 클래스명을 흔들고 있습니다만 나쁘지 않아.
할 일은 주로 다음과 같습니다.

1. 양식 데이터 선언

  created() {
    this.todoList = TODO_LIST;
  },

created 내에서 import 하고 있는 TODO_LIST 를 data 에 넣습니다.
이번은 파일로부터입니다만, 대체로 여기는 api라든지로 데이터 취득해 온다고 생각합니다.
api를 사용할 때도 mounted 라든지가 아니라 created 에 쓰는 것이 옳은 것 같습니다.

2. 추가 버튼

    addForm() {
      const additionalForm = {
        title: "",
        description: "",
        date: "",
        time: "",
      }
      this.todoList.push(additionalForm);
    },

데이터로부터 취득해 온 형식과 같은 것을 생성합니다.
id는 화면적으로 불필요했기 때문에 제외.

누르면 ...



제대로 빈 양식이 하나 추가되었습니다.

3. 삭제 버튼

    deleteForm(id) {
      this.todoList.splice(id, 1);
    }

삭제는 v-for에서 생성한 index를 반환하고 그 값으로 splice를 수행합니다.
v-for로 값을 감시하고 있으므로, 즉시 화면상에서도 반영, 이 이외의 처리는 불필요합니다.

4. 문자 수 카운트

{{ todo.title.length }} / 30

이것은 매우 간단합니다.
length라든지 사용할 수 있는 것은 매우 편리하네요, 과연 Vue.

주의 사항 : 이번에는 상수 파일과 새로 생성 된 양식 데이터는 기본적으로 빈 문자이지만,
서버에서 검색하는 값이 NULL이면 오류가 발생합니다.

{{ todo.description ? todo.description.length : '0' }} / 30

조심 때문에 이러한 느낌의 설명이 안심입니다.

그리고는 전부 DOM으로 처리.
v-model로 값을 넣고 있으므로, 재기록할 때마다 갱신되고 있습니다.

요약과 되돌아

처음에는 이러한 처리를 Vue로 작성한 후
gg도 좀처럼 나오지 않았기 때문에,
스스로 여러가지 해 보면, 의외로 간단하게 할 수 있었으므로 써 보았습니다.

그 밖에 어떤 방법이 있나요, 데이터를 등록하는 곳까지를 생각하면
코드량도 크게 많지 않기 때문에 나쁘지 않은 생각도 합니다.

실제 프로젝트라면 날짜 형식이 YYYY/MM/DD이거나 변환을 바꿉니다.
시간이 많이 걸렸습니다.
(시간계의 폼이라고 포맷 지정하고 싶네요, 원래 표시는 YYYY/MM/DD인데, value는 YYYY-MM-DD인 것이 조금 잘 모른다...)