this.$nextTick()

vue.js에서 제공하는 메소드

vue의 반응성 시스템을 이해하고 활용하는데 유용

 

vue 컴포넌트는 데이터가 변경되면 자동으로 리렌더링되지만, 때로는 변경된 데이터가 DOM에 적용되기 전에 코드를 실행해야 하는 경우가 있음 -> 이때 this.$nextTick()를 사용해야 함

 

DOM 업데이트 사이클에서 코드 실행 함. 즉 데이터 변경 후 DOM 업데이트가 완료된 시점에서 콜백 함수를 실행

-> 변경된 데이터가 반영된 화면을 기반으로 추가적인 작업을 수행할 수 있음

<template>
  <Title name="TO-DO" />
  <ToDoInput />

  <div v-for="data in dataJson" :key="data.id">
    <div>
      <input type="checkbox" :id="data.id" @click="check" />{{ data.todo }}
    </div>
  </div>
  <ToDoList />
</template>

<script>
import axios from "axios";
import Title from "./components/Title.vue";
import ToDoInput from "./components/ToDoInput.vue";
import ToDoList from "./components/ToDoList.vue";

export default {
  name: "App",
  components: {
    Title,
    ToDoInput,
    ToDoList,
  },
  data() {
    return {
      dataJson: null, // json 파일에 저장되어있는 데이터를 dataJson으로 저장
      checkedCategories: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 서버 측에게 ToDoList data를 요청하고 받아와 화면에 출력
    getData() {
      axios
        .get("http://localhost:3000/getData")
        .then((response) => {
          this.dataJson = response.data;
        })

        .catch((error) => {
          console.error(error);
        });
    },
    check(e) {
      this.$nextTick(() => {
        console.log(e.target.id);
      });
    },
  },
};
</script>