programing

경로의 일부가 $route.params에 속할 때 Vuetify 버튼에서 Nuxt 링크를 정의하는 방법?

prostudy 2022. 4. 18. 21:16
반응형

경로의 일부가 $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에서 찾을 수 있다.

참조URL: https://stackoverflow.com/questions/52369563/how-to-define-a-nuxt-link-in-a-vuetify-button-when-portion-of-the-path-belongs-t

반응형