vue18 v-on event handler 등록 버튼을 클릭할 때 콘솔에 이벤트가 발생했음을 표시하려면 어떻게 해야할까? v-on:click 과 같은 이벤트 사용을 위해 핸들러를 등록할 수 있다. 매우 간단하며 규칙은 다음과 같다. v-on:이벤트이름 = "[이벤트핸들러 호출식;]+ " 이벤트핸들러 호출하는 수식을 여러개 적어도 된다. 세미콜론을 습관적으로 쓰는 것이 실수를 방지해줄 것이다. 또한 핸들러 등록시 $event를 써주면 핸들러에서 해당 이벤트를 사용할 수 있다. $event를 사용하기 위해서 인자 순서는 상관 없다. 2020. 7. 9. 반응성 유지하면서 데이터 주입 배열객체와 일반 객체에 데이터를 주입하면서 반응성도 만들어 내는 방법은 없을까? 답은 set을 사용하면 된다. 전역객체 Vue.set도 가능하고 vm인 this를 사용해도 된다. 인자는 주입될 객체, 배열인 경우 인덱스/객체인 경우 키, 추가할 값 순서이다. this.todos[3] =new data 이 아니라 this.$set(todos, 3, new data) 를 사용해야 반응성이 생긴다. 2020. 7. 9. v-for using object v-for에서 반복할 대상이 객체인 경우에는 키별로 반복이 된다. 배열을 쓸 때와 약간 다르므로 문법을 비교해보자. 배열 같은 경우는 push나 pop같은 것을 쓰면 데이터 변경시 반응성을 가진다. 하지만 객체 obj는 생성될 때 name 과 age 속성만 있었으므로 다른 속성을 동적으로 추가해도 반응성을 가지지 못한다. 이에 대한 해결 방법은 vm.obj 의 참조 값에 새로운 객체를 다시 할당시키는 방법이다. gender: male 속성을 추가해보자. vm.obj = Object.assign({}, vm.obj, { gender: male} ) 위 코드를 통해 obj는 새로운 객체를 참조하게 되고 이 새로운 객체는 만들어 질 때 기존 obj 속성들과 gender 속성을 가지므로 모두 반응성을 가진다. .. 2020. 7. 9. v-for 반응성 유지 v-for에 사용된 배열이 변경될 수 있는데 이것이 반응성을 가지기 위해서는 push나 pop같은 특정 메소드를 사용해야 반응성을 가진다. 아래 예시에서 pushTodo()를 this.todos[3] = {title:'야식 먹기'} 로 하면 데이터는 변경이 되지만 반응성을 갖지 못해서 html에 반영이 안된다. 따라서 공식 사이트에서 말하는 메소드를 사용하여야 한다. 2020. 7. 9. 이전 1 2 3 4 5 다음
