[Vue3] 버튼 클릭 시 입력한 값 : data 값에 등록

 

만들고 싶은 것

값을 입력하고 클릭하면 출력되게 만들기

 

완성된 예제 이미지

 

1. 인풋에 입력한 값 저장하기

2. 클릭하면 저장한 인풋 값을 데이터에 등록

3. 등록된 데이터 값 보여주기

 

Html

<div id="app">
  <div class="search">
      <p>
          <label>type your list</label> <input type="text" @change="input"/>
          <button @click="click">click</button>
      </p>
      <p>{{text}}</p>
  </div>
</div>

1. @change="input" : input값이 변경되면 data에 업데이트 되도록 해야함

2. @click="click" : 버튼을 누르면 업데이트된 data값이 {{ text }} 에 출력되도록 만들기

 

 

 

Javascript

const app = Vue.createApp({
    data(){
        return {
            text : '', //출력될 값
            inputText : '' //input값
        }
    },
    methods:{
        input(e){
            return this.inputText = e.target.value
            //input에 입력된 값을 inputText로 넣어주기
        },
        click(){ 
            return this.text = this.inputText
            //출력될 값인 text에 위에서 input 값을 넣어준 inputText를 넣어주기
        }
    }
}).mount("#app")

** inputText 에 한번 담아서 text에 넘겨주는 이유

바로 text에 넘겨주게 되면 v-model 과 같이 실시간으로 값이 업데이트가 되기 때문에,

클릭 했을 때 값이 업데이트가 되길 바란다면, inputText 에 한번 담아주고 클릭 시 inputText 를 text에 넣어주면 됨