인프런 커뮤니티 질문&답변
작성한 질문수
프롭스 데이터 질문입니다.
작성
·
110
0
크롬 확장 프로그램 vue devtools 이 안되서 강의 듣는데 좀 답답하네요 ㅠㅠ
<app-content v-bind:propsnum="message"></app-content>이렇게 적으면 hi가 나오고
<app-content v-bind:propsnum="num"></app-content>이렇게 적으면 10이 나오고
근데
'<h1> {{propsnum}} {{propsdata}}</h1>',이렇게 두개는 안나오고...
어렵습니당..
직접 데이터 확인해보면 좋은데 왜 확장프로그램이 안될까요....ㅠㅠㅠ 레거시로 깔았는데도 개발자도구에서 vue탭이 안보여요,..
<app-content v-bind:propsnum="message"></app-content>
</div>
let appContent={
template : '<h1> {{propsnum}} {{propsdata}}</h1>',
props:['propsnum','propsdata']
}
new Vue({
el: '#app',
components:{
'app-header' : appHeader,
'app-content' : appContent
},
data:{
message : 'hi',
num:10
}
})
퀴즈
43%나 틀려요. 한번 도전해보세요!
컴포넌트 간에 명확한 통신 규칙이 필요한 주된 이유는 무엇일까요?
코드의 양을 늘리기 위해
복잡한 데이터 관계와 버그 추적의 어려움을 피하기 위해
특정 개발 패턴을 강제하기 위해
컴포넌트의 스타일을 개선하기 위해
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. Oh Chocho님.
프롭스를 적절하게 넘기는 방법과 vue devtools 사용 관련하여 궁금해하시는 부분에 대해 도와드리겠습니다.
프롭스 바인딩 문제:
- 코드에서
<app-content v-bind:propsnum="message"></app-content>을 사용하고 있으니,propsnum으로 ‘hi’가 잘 전달되고 있습니다. 그러므로template: '<h1> {{propsnum}} {{propsdata}}</h1>'에서는propsnum이 ‘hi’가 될 것입니다.
propsdata가 전달되도록 하고 싶다면<app-content v-bind:propsdata="message"></app-content>처럼 ‘propsdata’에message를 바인딩하는 코드를 추가해주세요. 두 값을 함께 나타내고자 하면 각각의 바인딩 설정이 필요합니다.
- 코드에서
Vue DevTools 문제:
Vue DevTools가 표시되지 않는 문제는 경험에 따라 여러 가지 원인이 있을 수 있습니다. 확장 프로그램이 설치되었더라도, 최신 브라우저와 Vue 버전에 맞춰 호환되지 않는 경우가 있어서 발생할 수 있습니다.
- 브라우저의 콘솔에
Vue객체가 출력되는지 확인하고, 최신 버전의 Vue.js가 사용되고 있는지 체크하세요.Vue.config.devtools = true;를 설정하여 개발자 도구 사용이 가능한지 설정해보시기 바랍니다.
관련해서 참고할 수 있는 게시물 링크는 다음과 같습니다:
- Vue DevTools 설치와 사용 문제 해결 관련 기존 답변
더 자세한 정보는 위의 링크를 확인해 주시고, 아직 해결되지 않은 부분이 있거나 추가 질문이 있으시면 언제든지 말씀해 주세요. 저도 추가적인 정보를 제공할 수 있도록 더욱 노력하겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.