본문 바로가기
ETC/Vue.js

Vue 시작은 객체 생성부터, function () { [native code] } 오류

by java나유 2022. 12. 18.

Vue data를 출력하는 예제를 따라하고있었는데

음..나만 methods 에 있는  data를 불러오지 못하고  function () { [native code] }가뜨는것이다..

뭘까,..,, 구글링으로 검색후 찾아냈다. 

우선 내가 출력하려고 했던 코드는 아래의 코드였다.

var test4 = new Vue({
 			el : '#test4',
 			data : {
 				name: '홍길동',
 				age : 30
 			},		
 			methods :{
				user_info : function(){
					return '이름은 ' + this.name +' 이고 나이는 '+ this.age +'입니다' 			
				} 				
 				
 			}
 		})

 

<div id="test4">
		<h3>{{user_info}}</h3>
	</div>

<h3>{{user_info}}</h3> 를 <h3>{{user_info()}}</h3>로 변경..

	<h3>{{user_info()}}</h3>

 

왜 이런 오류가 뜨는건지 정확히 할 수는 없지만 vue3가 나온 시점에서 종종 발생하는 것 같다.

어떤 사람은 ()가 없어도 출력이 되는 사람도있었다.

 

 

++ 기본 출력 

var test3 = new Vue({ 			
 			el: '#test3',
 			data : {
 				int3 : 100,
 				float3 : 11.11,
 				str3 : '문자열3',
 				boolean3 : true,
 				array3 : [10, 20, 30],
 				object3 : {
 					a1: 'a1문자열',
 					a2: 'a2문자열'
 				}
 			}
 			
 		})
<div id="test3">
		<h3>{{str3}}</h3>
		<h3>{{int3}}</h3>
		<h3>{{float3}}</h3>
		<h3>{{boolean3}}</h3>
		<h3>{{array3}}</h3>
		<h3>{{array3[0]}}</h3>
		<h3>{{array3[1]}}</h3>
		<h3>{{array3[2]}}</h3>
		<h3>{{object3.a1}}</h3>
		<h3>{{object3.a2}}</h3>
	</div>

728x90

댓글