인프런 커뮤니티 질문&답변
작성한 질문수
프롭스 데이터 질문입니다.
작성
·
30
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
}
})
답변 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 설치와 사용 문제 해결 관련 기존 답변
더 자세한 정보는 위의 링크를 확인해 주시고, 아직 해결되지 않은 부분이 있거나 추가 질문이 있으시면 언제든지 말씀해 주세요. 저도 추가적인 정보를 제공할 수 있도록 더욱 노력하겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.