중복 값을 넣었을 때 inputText 유지 하는 방법 좀 가르쳐... - 인프런

안녕하세요 선생님

저는 inputText에 값을 넣고 이벤트를 실행 했을 경우
중복 값이 있는 경우 : Modal 창 띄우고 inputText 값 유지
중복 값이 없는 경우 : 기존 로직 실행
을 하려고 합니다.
TodoInput.vue에서 이벤트를 주고 App.vue에서 중복 체크 한 후 validate 값을 props를 통하여 TodoInput.vue에 전달 하였습니다.
화면에 보여졌을때나 devTools의 vue를 보면 props 값이 부모와 일치 한데 메소드에서 props를 사용하려고 하면 부모 데이터의 이전 값이 표시가 됩니다. 메소드에서 부모와 동일한 props 데이터를 받는 방법이 있을까요?
소스 보시고 답변 해주시면 감사하겠습니다.

App.vue

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput v-on:addTodoItem="addOneItem" v-bind:propsdata="validate" ></TodoInput> <!-- propsdata 선언 --> 
    <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem" v-on:toggleItem="toggleOneItem"></TodoList>
    <TodoFooter v-on:clearAll="clearAllItems"></TodoFooter>

    <Modal v-if="showModal" @close="showModal = false">
        <!--
        you can use custom content here to overwrite
        default content
        -->
        <h3 slot="header">
            경고!
            <i class="closeModalBtn fas fa-times " @click="showModal = false"></i>
        </h3>
        <h3 slot="body">
            {{ message }}
        </h3>
    </Modal>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue';
import TodoInput from './components/TodoInput.vue';
import TodoList from './components/TodoList.vue';
import TodoFooter from './components/TodoFooter.vue';
import Modal from './components/common/Modal.vue'

export default {
  data: function() {
    return {
      todoItems: [],
      showModal: false,
      message: '',
      validate: false //중복 체크 값 선언
    }
  },
  methods: {
    addOneItem: function(todoItem) {
      var obj = {completed: false, item: todoItem};
      localStorage.setItem(todoItem, JSON.stringify(obj));
      
      // todoItems에 이미 같은 값이 있는지 체크      
      if(!this.todoItems.some(data => data.item == todoItem)) {
        this.todoItems.push(obj)
        this.validate = false; // 중복 체크 값 입력
      } else {
        this.message = '중복 데이터가 존재 합니다. 중복 데이터 : [' + todoItem + ']'
        this.showModal = !this.showModal;
        this.validate = true; // 중복 체크 값 입력
      }
      console.log('App.vue data : ' + this.validate); // 중복 체크 값 Log 출력
    },
    removeOneItem: function(todoItem, index) {      
      localStorage.removeItem(todoItem.item);
      this.todoItems.splice(index, 1);
    },
    toggleOneItem: function(todoItem, index) {
      // todoItem.completed = !todoItem.completed; // 같은 동작
      this.todoItems[index].completed = !this.todoItems[index].completed;
      // 로컬 스토리지의 데이터를 갱신
      localStorage.removeItem(todoItem.item);
      localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
    },
    clearAllItems: function() {
      localStorage.clear();
      this.todoItems = [];
    }
  },
  created: function() {
    if(localStorage.length > 0) {
        for(var i=0;i<localStorage.length;i++) {
            if(localStorage.key(i) !== 'loglevel:webpack-dev-server') {
                // console.log(JSON.parse( localStorage.getItem(localStorage.key(i))));
                this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
                // this.todoItems.push(localStorage.key(i));
            }
        }
    }
  },
  components: {
    //  컴포넌트 태그명 : 컴포넌트 내용
    'TodoHeader': TodoHeader,
    'TodoInput': TodoInput,
    'TodoList': TodoList,
    'TodoFooter': TodoFooter,
    Modal: Modal
  }
}
</script>

TotoInput.vue

<template>
  <div class="inputBox shadow">
    <input type="text" v-model="newTodoItem" v-on:keyup.enter="addTodo">
    <!-- <button v-on:click="addTodo">add</button> -->
    <span class="addContainer" v-on:click="addTodo">
        <i class="fas fa-plus addBtn"></i> 
    </span>

    <Modal v-if="showModal" @close="showModal = false">
        <!--
        you can use custom content here to overwrite
        default content
        -->
        <h3 slot="header">
            경고!
            <i class="closeModalBtn fas fa-times " @click="showModal = false"></i>
        </h3>
        <h3 slot="body">
            아무것도 입력하지 않으셨습니다.
        </h3>
    </Modal>
  </div>
</template>

<script>
import Modal from './common/Modal.vue'

export default {
    props: ['propsdata'], // propsdata 생성
    data: function() {
        return {
            newTodoItem: "",
            showModal: false,
            propsd: this.propsdata
        }
    },
    methods: {
        addTodo: function() {
            if(this.newTodoItem !== '') {
                this.$emit('addTodoItem', this.newTodoItem);
                
                console.log('TotoInput.vue data : ' + this.propsdata); // propsdata Log 출력
               // 중복이 아닐 경우에만 Text Clear
 if(!this.propsdata) {
                    this.clearInput();
                }
            }
            else {
                this.showModal = !this.showModal;
            }
        },
        clearInput: function() {
            this.newTodoItem = '';
        }
    },
    components: {
        Modal: Modal
    }
}
</script>

결과

인프런 커뮤니티 질문&답변

중복 값을 넣었을 때 inputText 유지 하는 방법 좀 가르쳐 주세요.