vue.js - for문 관련

Vue.js관련해서 오랜만에 다시 블로그에 글을 써봅니다.

 

이번에는 오늘 배웠던 v-for문과 key를 이용해서 포스트를 작성해보겠습니다.

 

이전에 계속 v-model을 적용하는데 어려움을 겪고 있었다.

동적으로 input 혹은 textarea 태그를 생성하는데 여기에는 v-model을 적용할 수 없어서 꽤 고생을 했었고,

결국 다른 방법을 찾아냈다.

 -> id값을 이용해서 값을 받는 방식을 택했다.

먼저 기존에 적용했던 방법부터 살펴보겠다.

<form method="post" @submit.prevent="createDaily">
	<div id="daily"></div>
	<div>
		<input type="button" value="Add" v-on:click="daily_add()"/>
		<input type="button" value="Delete" v-on:click="daily_delete()"/>
	</div><br/>
	<button id="button" type="submit">Submit</button>
</form>

이게 제가 만들었던 textarea 혹은 input 태그를 동적으로 생성하는 폼입니다.

그리고 각각의 메소드를 살펴보겠습니다.

    daily_add: function () {
      const addedForm = document.getElementById('daily')
      const str = `<br/><label>Daily_Done</label><br/>
                <textarea type="text" cols="40" placeholder="최대 2000자" name="done${this.count}" id="done${this.count}"></textarea>`
      const div = document.createElement('div')
      div.id = 'added' + this.count
      div.innerHTML = str
      addedForm.appendChild(div)

      this.count++
      console.log(this.count)
    },
    daily_delete () {
      if (this.count > 1) {
        const addedDiv = document.getElementById('added' + (--this.count))
        document.getElementById('daily').removeChild(addedDiv)
      }
      console.log(this.count)
    },
    createDaily: function () {
      const fd = new FormData()
      for (let i = 0; i < this.count; i++) {
        const added = document.getElementById('done' + i)
        console.log(added.value)
        fd.append('done' + i, added.value)
      }
      console.log(fd)
      this.$axios.post('/api/create/daily', fd)
        .then((response) => {
          console.log(response.data)
          if (response.data === -1) {
            alert('Creating Daily Report Wrong!')
          }
          this.$router.push({ name: 'Success' })
        })
    }

• daily_add() : 태그들을 동적으로 생성합니다.
• daily_delete() : 동적으로 생성된 태그들을 삭제합니다.
• createDaily : 생성된 textarea의 value들을 받아서 넘깁니다. 저는 백엔드를 Spring으로 사용하고 있어서 Spring Controller에서 받습니다.
• 전에는 그냥 그러려니 했지만, 지금 보니깐 코드가 굉장히 길군요. 남들이 본다면 혼란스러워할 코드 같습니다.

 

createDaily 메소드 안에서 document.getElementById를 통해 id의 value값을 넘겨받는 조건으로 진행했습니다.

이제 이 방법을 다르게 고쳐보겠습니다.
(아마 이렇게 하는게 더 옳다고 생각합니다. 저도 제가 짜놓은 코드를 모두 이런 식으로 바꿀 생각입니다.)

      <div v-for="(input,k) in inputs" :key="k">
        <label>Done</label>
        <v-col cols="12" sm="7">
          <v-textarea outlined rows="2" auto-grow type="text" :id="'done' + k" v-model="input.daily"/>
        <span>
          <v-btn small @click="remove(k)" v-show="k || (!k && inputs.length > 1)">minus</v-btn>
          <v-btn small @click="add(k)" v-show="k === inputs.length - 1">plus</v-btn>
        </span>
        </v-col><br/>
      </div>

많이 간결해졌습니다. method 코드를 본다면 훨씬 더 간단해진 코드를 볼 수 있습니다.

참고로 v-btn, v-col, v-textarea 태그는 vuetify에서 사용하는 태그입니다. vue 프로젝트에 vuetify를 설치하면 사용할 수 있습니다.

  methods: {
    add (k) {
      this.inputs.push({ daily: '' })
    },
    remove (k) {
      this.inputs.splice(k, 1)
    },
    DailyCreate () {
      const fd = new FormData()
      for (let i = 0; i < this.inputs.length; i++) {
        console.log(this.inputs[i].daily)
        fd.append('done' + i, this.inputs[i].daily)
      }
      this.$axios.post('/api/create/daily', fd).then(response => {
        if (response.data === -1) {
          alert('Creating Daily Report Wrong!')
        }
        this.$router.push({ name: 'Success' })
      })
    }
  }

• add() : 동적 생성입니다.
• remove() : 삭제합니다.
• DailyCreate () : 입력받은 값들을 받아서 넘깁니다.
• DailyCreate() 메소드의 코드는 그대로인 것 같긴 하지만, add()와 remove() 메서드는 굉장히 간단해졌습니다.

역시 입력받은 값들은 Spring 에서 받아 처리합니다.

위 그림이 새로 적용한 코드의 모습입니다.

minus를 누르면 사라지고, plus를 누르면 새로 생깁니다.

굉장히 좋은 것 같습니다.

 

(참고로 여러개를 입력 받으시면 daily: '' 부분 뒤에 여러 개를 더 입력하시면 됩니다. 이정도는 코딩 해봤으면 눈치 채시겠죠 ㅎㅎ)

 

이 방식을 사용하면 동적으로 생성하더라도 v-model을 계속해서 사용할 수 있습니다. 그래서 굉장히 유용한 것 같습니다.

아래에는 제가 참조한 사이트 입니다.

smarttutorials.net/dynamically-add-or-remove-input-textbox-using-vuejs/

 

몇 주 전에 이런 내용에 대해 코멘트를 받긴 했었는데 정작 어떻게 써야할 지 모르다가 우연한 계기로 알게되서 써봅니다.