# v-for

v-model 해부
내가 그동안 해온 멍청한 코드를 반성하며 작성해본다. 이 글을 작성하는 이유는 v-model이라는 요소를 어떻게하면 제대로 이해하고 쓸 수 있을까를 넘어 emit과 props에 대한 완벽한 이해 그리고 사용에 대한 어려움이 없게 하기 위해서 써보는 글이다. > 1.

[vue3] 리스트 렌더링(v-for)
v-for 디렉티브를 사용하여 배열을 리스트로 렌더링할 수 있음.v-for 디렉티브는 item in items 형식의 특별한 문법이 필요함.여기서 items는 배열이고, item은 배열 내 반복되는 엘리먼트의 별칭(alias) 임.v-for 범위 내 템플릿 표현식은 모

Vue - 리스트 렌더링
배열 v-for을 통해서 요소를 반복해서 출력할 수 있다. 현재 항목의 인덱스를 두 번째 전달인자 옵션으로 제공한다. in 대신에 of를 구분자로 사용할 수 있다. JavaScript의 이터레이터 구문과 유사하다. 객체 객체의 속성을 반복 (value를 반복)

Vue - 기본 구조와 디렉티브
디렉티브란? > 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본 구조 CDN을 통해 Vue.js 스크립트를 가져오면 전역 객체 Vue를 사용할 수 있다.
v-for 내부에 v-model을 걸었을때 checkbox를 하나만 선택해도 나머지 checkbox가 모두 선택되는 문제
문제)체크박스로 선택한 value를 v-model을 통해 state.brandIdList 배열에 저장하고자 했는데 for문 안에 속한 상태라 체크박스를 하나만 선택해도 나머지 전부다 선택되는 문제가 생김해결)isChecked 함수는 brandId를 매개변수로 받아 해당

이중 for문으로 나열한 사진 가로로 배치하기
바깥 for문이 돌때 사진이 옆에 붙지 않고 그 다음줄에 붙어서 한참을 헤맸는데...유효했던건 바깥 for문과 그 for문을 감싸는 div 둘다에 display: flex를 추가하는 것이었음

v-for 이중으로 작성해야할때
state.review 배열을 tmp로 받아서 v-for문을 돌리고state.review.images 배열을 img로 받아서imgages 배열 내에 존재하는 imageurl에 접근
vue_TIL
v-for 는 템플릿에서 for 돌리므로 구조에 변화를 주어 새로 for를 돌려야 할 때는 리렌더링을 해주어야 한다.위의 예제처럼 v-for를 반응형 데이터(arr)를 지정하고, 배열 내부의 아이템을 제어(push, splice)하는 메소드를 사용하면 요소 변화가 생길
Vue Form Input 바인딩
Form Input 바인딩 v-model 디렉티브를 사용하여 Form input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다. 입력 유형에 따라 엘리머느를 업데이트 하는 올바른 방법을 자동으로 선택한다. v-model은 기본적으로 사용자 입력 이
Vue 리스트 렌더링
v-for 디렉티브를 사용하여 배열 기반으로 리스트를 렌더링v-for 디렉티브는 item in items 형태로 특별한 문법이 필요in 대신 of를 구분자로 사용 가능items : 원본 데이터 배열item : 반복되는 배열 엘리먼트의 별칭v-for 블록 안에는 부모 범
Vue 조건문과 반복문
엘리먼트의 표시 여부를 간단히 제어할 수 있음텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩할 수 있음을 보여줌Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 전환 효과 시스템 제공배열의 데이터를 바인딩하여 반복문을
[v-for] vue error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) at
error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) atv-for를 통해 아이템을 컴포넌트에 전달할 때 v-bind:key가 필수적으로 요구됨

[Vue] v-for="elem in elems"를 이용하여 list 반복(:key 필수)
우리가 아는 for in 이용한 반복문v-for 들어간 태그를 elems 길이 만큼 반복해서 생성option에 city in cities 넣어주는 순간 'city'라는 변수 사용 가능:value에 city.value 넣어주면 됨:key값 필수!!!!!!!elem.id
Vue :v-if | v-for
v-if v-if 는 조건에 따라 HTML을 표시하고 싶거나 지우고 싶을 때 사용한다. v-for v-for은 HTML 태그를 반복해서 표시하고 싶을 때 사용한다. 배열 데이터 추가와 삭제 Vue.js에서 배열데이터의 추가나 삭제는 JavaScript의 Array의
Vue) 02. v-for 반복문..
Vue의 반복문은 React 처럼 여러방법이 존재하지 않고 오로지 v-for이라는 반복문만 존재한다.이러한 점 중 하나가 Vue의 장점이다. (협업에서 코드의 통일성)메뉴바를 만들 때, a태그가 반복되는 것을 예제로 v-for문을 써보려고 한다.아래의 코드와 같이 re
[Vue] v-for (directive)
array 배열\[] v-for="값, 인덱스 in 배열" key=""object 객체{} 둘다 표현 가능하다.v-for="값, 키 in 객체" key=""

[Vue] : 리스트 랜더링
디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있다. v-for 디렉티브는 item in items 형태로 특별한 문법이 필요하다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭이다. Vue가 v-for에서 렌더링된 엘리
vue, 가변 배열에 v-for을 사용하여 key 값을 index로 사용시 문제점
토이프로젝트 도중 v-for을 사용하여 만든 리스트의 삭제 함수를 만들었더니 버그가 발생했다.포지션이 absolute에 임의의 위치를 가진 listitem1 과 마찬가지인 listitem2 가 존재할때 1녀석을 삭제했더니 2가 1의 위치에 가버리는 버그였다.두시간정도