[vue3] 자바스크립트 객체 복사/비교

● 객체 복사/비교

const getTodo = async() => {

          try {

            const res = await axios.get('http://localhost:3000/todos/' + id)

            todo.value = { ...res.data };

            originalTodo.value = { ...res.data };

            loading.value = false;

          }catch(err){

            triggerToast('Something went wrong', 'danger');  

          }

        }

        getTodo();

값을 get으로 가져오고

todo 라는 값안에 = { ...res.data }; 

[spread operate 으로 객체를 벗겨 다시 넣어줌,]

=> 값을 복사해준다.

 

originalTodo 라는 값안에 = { ...res.data };

=>   값을 복사해준다.

 

input 의 값이 변경되면 

// _loadash, 주소값 동일한지 찾기

        const todoUpdated = computed(()=> {

            return !_.isEqual(todo.value, originalTodo.value)

        })

 

[lodash라는 라이브러리]를 이용하여

!_.isEqual( todo.value, orginialTodo.value) 값을 비교 할 수 있다.

주소값을 비교하게됨.

 

만약에 해당 값이 같지 않을경우 

<button

        type="submit"

        class="btn btn-primary"

        :disabled="!todoUpdated"

    >

        Save

    </button>

 

disabled를 반대로 처리하여 만약 같을경우 disabled 처리하고, 아닐경우 풀리게 설정한다.

todo.value의 값은 수정하면 값이 계속 변경되기 떄문에 originalTodo 와의 값이 일치할 수 없다.