반응형
경로의 일부가 $route.params에 속할 때 Vuetify 버튼에서 Nuxt 링크를 정의하는 방법?
Nuxt와 Vuetify 애플리케이션에는 다음과 같은 일련의 버튼이 있다.
<v-btn dark color="orange" href="className/studentName" nuxt>
<v-icon large left>favorite</v-icon>
studentName
</v-btn>
다음 경로에서 className을(를) 얻는다는 것을 알고 이 코드를 리팩터링하려는 경우:$route.params.className
그리고 일반 자바스크립트 배열에서 학생 이름을 얻는다.
href={$route.params.className}/studentName}을 입력하면 다음 오류가 표시됨:
대신 v-bind 또는 대장 속기를 사용하십시오.예를 들어, 대신
, 를 사용하십시오.
그런 식으로 하면:
:href="$route.params.className/studentName"
대신 다음과 같은 오류가 발생함:
잘못된 프로펠러: 프로펠러 "href"에 대한 유형 확인 실패.예상 문자열, 객체, 번호를 얻었다.
그래서 어떻게 하면 내 말을 정확하게 정의할 수 있을까?href
딱딱한 글씨를 쓰지 않고 버팀목을 대다.className
(사용하고 싶다는 뜻이다.$route.params.className
버튼이 여러 개 있는 내 코드를 리팩터링하기 위해서?
당신은 사용해야만 한다.to="studentName" nuxt
예를 들면 다음과 같다.
<v-toolbar-items class="hidden-sm-and">
<v-btn flat to="/home" nuxt> Home </v-btn>
<v-btn flat to="/contact" nuxt> Contact </v-btn>
<v-btn flat to="/login" nuxt> Login </v-btn>
</v-toolbar-items>
다음과 같은 문을 사용하여 경로 매개변수 값을 평가하고 문자열을 추가할 수 있다./studentName
:
:href="$route.params.className + '/studentName'"
그게 도움이 되길 바래!
사용할 수 있다v-bind:href=className+"/"+studentName
이 일을 성사시키기 위해서야working code는 https://codepen.io/mohithg/pen/yxRabK에서 찾을 수 있다.
반응형
'programing' 카테고리의 다른 글
소품으로 전달된 배열에서 객체를 어떻게 반응적으로 제거하여 DOM에 반영할 수 있는가? (0) | 2022.04.18 |
---|---|
javascript와 vue를 사용하여 객체를 어레이에 추가할 때 어떻게 해야 하는가? (0) | 2022.04.18 |
C에서 배열의 최대 크기는? (0) | 2022.04.18 |
PersistentObjectException: JPA 및 최대 절전 모드에서 해제된 독립된 엔티티가 지속되도록 전달됨 (0) | 2022.04.18 |
Vuex-test-utils를 사용하여 구성 요소의 VueX 상태 변경을 테스트하는 방법 (0) | 2022.04.18 |