본문 바로가기

:value2

[Vue.js] select 태그에 데이터 바인딩하기 공식사이트 기준으로 먼저 말을 해보겠습니다. Please select one A B C 선택함: {{ selected }} 위와 같은 코드가 나타나는데요 이러한 이미지로 만들어지는 것을 볼 수 있습니다. 출처: https://v2.ko.vuejs.org/v2/guide/forms.html#%EC%85%80%EB%A0%89%ED%8A%B8 저는 저렇게 만들지 않고, v-for 을 이용하여 select 태그를 완성하였는데요 {{ user.name }} data() { return { selWrkTyp: [ {name:"전체", value: ""}, {name:"A", value: "01"}, {name:"B", value: "02"}, ], }; }, 이렇게 완성을 하였습니다. 데이터 바인딩을 v-model.. 2023. 12. 5.
[Vue.js] input 태그에 데이터 바인딩하기(feat. v-model, type, :value) 먼저 공식 사이트의 내용을 들고와보자면 메시지: {{ message }} 출저: https://v2.ko.vuejs.org/v2/guide/forms.html#%EB%AC%B8%EC%9E%90%EC%97%B4 이런식으로 생긴 것이 나오는 것을 알 수 있습니다. v-model 을 고집하며 제가 만든 코드는 이러한 코드였습니다. 이러한 코드의 문제점은 1글자만 수정해도 커서가 끊기는 현상이였습니다. 10000이 있는데 11111로 바꾸고자하면 다 지우고 11 다시 클릭해서 111 다시 클릭해서 1111 ... 이런식으로 동작을 하는 것입니다. 이것 저것을 시도해 본 결과 type을 text로 선언하고 :value를 이용하여 데이터를 바인딩해주면 제대로 동작하는 것을 확인할 수 있었습니다. 단순 조회용도라면 .. 2023. 12. 5.