Vue JS (15) 썸네일형 리스트형 Vue.js - 에러도 없이 렌더링도 되지 않을 때 콘솔 창에 어떤 에러도 뜨지 않으면서 렌더링도 되지 않을 때 {{ item.return_cnt }} {{ item.pur_cnt }} {{ item.pur_id }} {{ item.sales_type }} {{ item.model_nm }} {{ item.mfcomp }} {{ item.price }} {{ item.total }} const tbodyOrderDetail = new Vue({ el: 'tbody#orderDetailMain', data: { orderDetailList: [{}] }, methods: { } }) tbodyOrderDetail.orderDetailList = [{pur_id: 132, purinf_id: 154, sales_type: 'ups', model_nm: 'SM.. Vue.js : v-model / v-bind:value 함께 쓰기 - v-on:change {{ item.model_nm }} {{ getPriceWithComma(index) }} {{ getTotalPrice(index) }} vue 객체에는 리스트가 저장돼 있다. 리스트를 이루고 있는 요소마다 orderDate 데이터가 있다. 이 orderDate 를 화면상 수치와 연동하고 싶었다. DB에서 불러온 값을 화면에 뿌려주거나, 화면에서 입력한 값을 DB에 넣거나 하려고 했다. v-model 을 쓰는 편이 적당했다. v-model은 양방향 바인딩이다. 데이터가 바뀌면 화면이 바뀌고, 화면이 바뀌면 데이터가 바뀐다. 그런데 문제는 중간에 형태를 가공해야 한다는 점이다. DB에서 읽어올 때는 "2022-05-05 00:00:00.0" 처럼 읽어 온다. "2022-05-05" 형태로 출력하고 싶었다.. Vue.js 에러 : v-else used on element <span> without corresponding v-if v-if v-else-if v-else v-if / v-else-if / v-else 등의 조건문 디렉티브를 사용할 때는 그 순서와 층위를 잘 맞춰서 써줘야 한다. 그렇지 않으면 아래와 같은 에러가 발생한다. v-else used on element without corresponding v-if. v-else-if 와 v-else 디렉티브는 반드시 v-if 디렉티브 다음에 나와야 한다. v-else-if는 여러 번 나와도 되지만, v-else 는 한 번만 쓸 수 있다. - 220426 Vue.js 에러 - 에러 메세지 없이 렌더링 안 됨 위처럼 v-model 디렉티브 안에 이상한 값을 넣으면 원래 콘솔창에서 에러가 나야 한다. 그런데 위나 아래처럼 공백을 넣으면 에러는 나지 않는다. v-model="" 그 대신 그 속성은 없는 셈치고 화면 렌더링은 된다. 근데 그중에서도 버튼 타입일 때 공백으로 놓으면 에러도 못 잡고 화면 렌더링도 되지 않는다. 따라서 웬만하면 쓸데없는 속성이나 바인딩은 다 지워놓고 하는 편이 좋다. Vue.js 에러 Error compiling template: v-bind:value conflicts with v-model - body - 모델명 주문 수량 v-bind와 v-model는 한 태그 안에 동시에 쓰지 못한다. 이유는 둘은 기능이 겹쳐서 충돌하기 때문이다. v-bind는 value를 넘겨주는 것이고 v-model는 value를 주거나 받기를 연동한다. 따라서 함께 쓰면 에러가 난다. 값을 넘겨 줘야 할 때와 받아야 할 때 서로 다른 처리를 거쳐야 한다면, v-bind:value 를 v-on:input, v-on:change 등의 이벤트 디렉티브와 함께 쓰면 된다. - 220426 Vue.js 셀렉트1 선택값에 따라 셀렉트2 옵션값이 바뀌는 기능 - body - {{ item }} {{ item }} 검색 - script - - 220422 Vue.js 시작하기 09 - form 바인딩 - body - use v-model instead of {{ textVal }} here ---------------------------------------------------- {{ checkedItem }} i like apple do you want some mango? please give me orange i'm listening to the melon {{ checkedList }} ---------------------------------------------------- red food is good for health yellow makes me happy my favorite color is orange do you like green? {{ pickedItem }} -----.. Vue.js 시작하기 08 - 이벤트 핸들링 : v-on, preventDefault , onchange, onclick, oninput - body - add 1 위 버튼을 클릭한 횟수는 {{ counter }}번 입니다. ---------------------------------------------------- print counter 위 버튼을 클릭하면 몇 회 클릭했는지 알 수 있습니다. ---------------------------------------------------- print msg 위 버튼을 클릭하면 몇 회 메세지가 출력됩니다. print hello 위 버튼을 클릭하면 몇 회 메세지가 출력됩니다. ---------------------------------------------------- get auto param 위 버튼을 클릭하면 자동으로 넣어주는 파라미터를 확입니다. get auto param all 위 .. 이전 1 2 다음
